如何在另一个div为空时隐藏一个div

Question

我是jQuery的新手，遇到了一些问题。

这是我的HTML代码:

<div id="mainpage-tabs-area">
<ul class="nav cf">
    <li class="tb-one"><a href="#description" class="current">BTN1</a></li>
    <li class="tb-two"><a href="#tabtwo">BTN2</a></li>
    <li class="tb-three"><a href="#tabthree">BTN3</a></li>
    <li class="tb-four"><a href="#tabfour">BTN4</a></li>
</ul>

<div class="list-wrap">
    <ul id="description">
        <li>Hello, I am a description</li>
    </ul>

    <ul id="tabtwo" class="hide">
      <li></li>
    </ul>

    <ul id="tabthree" class="hide">
        <li></li>
    </ul>

    <ul id="tabfour" class="hide">
        <li></li>
    </ul>
</div> <!-- END List Wrap -->
            </div> <!-- END Organic Tabs -->

以下是我的当前jQuery代码：

$(document).ready(function () {
    var tabContent = $('ul.list-wrap').find('li').text();
    if ($.trim(tabContent) === "") {
        $('ul.nav li').hide();
    }
});

我希望能通过jQuery检查.list-wrap中的每个li，如果该li为空，则删除.nav中对应的li，因为这是用于选项卡系统的，如果没有输入任何内容，则不想显示。

有什么建议适合新手吗？

Nick

- Nick Else

---

生成 HTML 时，你可以在空的 <li> 元素上添加一个类 / 设置属性，例如 class="empty"。然后使用 jQuery 并结合下面的答案进行迭代。这样做可以加速处理大量元素的情况。或者更好的方法是，不要生成选项卡。 - Lexib0y

哦，你确实想要它们，只是隐藏了。但你也可以在生成页面时这样做。 - Lexib0y

Answer 1

我会遍历列表项，检查每个节点文本的长度，并使用以下代码隐藏相应的选项卡：

：

$('.list-wrap li').each(function(i){
    if(!$(this).text().length) $('#mainpage-tabs-area li').eq(i).hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainpage-tabs-area">
    <ul class="nav cf">
        <li class="tb-one"><a href="#description" class="current">BTN1</a>
        </li>
        <li class="tb-two"><a href="#tabtwo">BTN2</a>
        </li>
        <li class="tb-three"><a href="#tabthree">BTN3</a>
        </li>
        <li class="tb-four"><a href="#tabfour">BTN4</a>
        </li>
    </ul>
    <div class="list-wrap">
        <ul id="description">
            <li>Hello, I am a description</li>
        </ul>
        <ul id="tabtwo" class="hide">
            <li></li>
        </ul>
        <ul id="tabthree" class="hide">
            <li></li>
        </ul>
        <ul id="tabfour" class="hide">
            <li></li>
        </ul>
    </div>
    <!-- END List Wrap -->
</div>
<!-- END Organic Tabs -->

< p > each()函数中的i是循环正在处理的元素的索引，这使您可以针对相应的选项卡元素并将其隐藏。

- j08691

---

谢谢！是的，我对jQuery的基础知识还可以，所以任何帮助都非常感激，感谢您的时间。 - Nick Else

Answer 2

这应该可以完成工作：

$('.list-wrap ul li').each(function(){
    var cnt = $('.list-wrap ul li').index( $(this) );
    var txt = $(this).text();
    if ($.trim(txt)==''){
        $('.nav li').eq(cnt).hide();
    }
});

jsFiddle演示

- cssyphus

---

好的，j08691的答案更简洁、更优雅，而且快了大约10分钟...做得好。 - cssyphus

Answer 3

I would suggest this If you are not making infinite lists

$('.tb-two').hide(); //if tabtwo is empty
$('.tb-hree').hide(); //if tabthree is empty
 and so on...

- niXful-Autistic

---

我没有给这个点踩，但是我想要 - 我认为好的答案应该能在一个 fiddle 中工作。你的答案并不完整，正如你所做的评论一样。 - gene