Question

如果category div不包含子项，我想隐藏product div。

这是我的HTML。

<div class="fieldset categories">
  <h3>1) Category #3</h3>
  <div class="products">
    <div id="product_2509" class="product">
      <div class="show">
        <label> XYZ </label>
        <p> Price: <strong> $50 </strong></p>
      </div>
    </div>
  </div>
</div>

<div class="fieldset categories">
  <h3>2) Category #4</h3>
  <div class="products">
    <div id="product_2510" class="product">
      <div class="show">
        <label> XYZ </label>
        <p> Price: <strong> $50 </strong></p>
      </div>
    </div>
    <div id="product_2511" class="product">

    </div>
  </div>
</div>

<div class="fieldset categories">
  <h3>3) Category #5</h3>
  <div class="products">
    <div id="product_2512" class="product">

    </div>
    <div id="product_2515" class="product">

    </div>
  </div>
</div>

<div class="fieldset categories">
  <h3>4) Category #6</h3>
  <div class="products">
    <div id="product_2512" class="product">

    </div>
  </div>
</div>

如果.product div没有包含任何孩子，那么我需要隐藏fieldset categories div。但任何.product字段集类别＆＃34;包含孩子然后我需要显示父div。在上面的例子中：

Div我需要隐藏（所有.product都不包含孩子）

1）类别＃5

2）类别＃6

Div我需要显示（任何.product包含孩子）

1）类别＃3

2）类别＃4（因为1个孩子包含孩子）

Answer 1

$(function(){
$(".product").each(function(){
    if($(this).children().length==0)
    {
        $(this).parents(".categories").hide();
    }
});

}）;

Answer 2

$('.categories').hide();
$(function(){
$(".product").each(function(){
    $(this).children('.show').parents('.categories').show();
});
});

或

$('.categories').hide();
$(function(){
$(".show").each(function(){
    $(this).parents('.categories').show();
});
});

http://jsfiddle.net/vodaaL1d/

如果其子div不包含子项，则隐藏父div

2 个答案: