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

时间:2015-07-24 15:43:43

标签: javascript jquery html css

我是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,因为这是用于选项卡系统,如果没有内容是进入后,他们不希望它显示。

对新手的任何建议?

尼克

3 个答案:

答案 0 :(得分:4)

我将遍历列表项,检查每个节点文本的长度,并隐藏相应的选项卡:

$('.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 -->

i函数中的each()是循环所在元素的索引,它允许您定位相应的制表符元素并将其隐藏。

答案 1 :(得分:1)

这应该做的工作:

$('.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 Demo

答案 2 :(得分:-1)

我建议如果你没有制作无限列表

&#13;
&#13;
BULK INSERT database..table
FROM 'C:\FileToImport.csv';
GO
&#13;
&#13;
&#13;