如果没有更多的孩子，jquery如何隐藏

Question

最初我会有

<div id="a">
 <div id="a_1" class="toBeHide"> something </div>
 <div id="a_2" class="toBeHide"> something </div>
 <div id="a_3" class="toBeHide"> something </div>
<div>

<div id="b">
 <div id="b_1" class="toBeHide"> something </div>
<div>

我会$('#b_1').hide()，现在我会说#b已经没有孩子了。

我的问题是如何检测是否有更多的孩子并隐藏#b？

Answer 1

由于您只是隐藏孩子，您可以使用:visible进行检查：

if($('#b > div:visible').length === 0) {
    $('#b').hide();
}

Answer 2

试试这个：如果孩子的长度为零，则隐藏b_1

 $(function(){
    if($('#b_1').children().length == 0)
    $('#b_1').hide();
 });

Answer 3

您可以这样使用：

   $('#b_1').hide();
if(!$('#b').children(":visible").length){
   $('#b').hide();
}

working demo

Answer 4

您可以使用.css()方法：

$('#b').css('display', function(){
   return $(this).contents().length === 0 ? 'none' : 'block';
});

Demo

---

需要注意的事项：

1. 你还没有关闭包装器div。
2. 使用.css()方法并使用display属性。
3. 返回.css()
回调中内容长度的值
4. 所以使用$(this).contents().length它也会检查textNodes。

对于＃4，如果您的标记是这样的：

<div id="b">
    something.
</div>

Answer 5

你去：http://jsfiddle.net/23zbU/10/

$('#b_1').hide();
var visibleCount=0;
$('#b').children().each(function(){
    if(!$(this).is(':hidden')){
        visibleCount++;
    }

    if(visibleCount==0){
        $('#b').hide();
    }
    else{
        $('#b').show();
    }
});

此代码实际上自动显示和隐藏#b