0

我试图弄清楚如何根据类名遍历元素，如果它有这个类则执行一些操作，如果没有，则执行其他操作。

到目前为止，请查看我的代码：

<script type="text/javascript">
jQuery(document).ready(function($) {
     var container = $('.container');

     container.each(function() {
          // if all list item has class of hidden then hide parent container
          container.hide();

          // if not all list item has class of hidden then show parent container
          container.show();
     });
});
</script>

<div class="container container1">
     <ul>
          <li class="item">item 1</li>
          <li class="item hidden">item 2</li>
          <li class="item">item 3</li>
          <li class="item">item 4</li>
     </ul>
</div>

<div class="container container2">
     <ul>
          <li class="item hidden">item 1</li>
          <li class="item hidden">item 2</li>
          <li class="item hidden">item 3</li>
          <li class="item hidden">item 4</li>
     </ul>
</div>

从上面的代码中，想要的结果是 container2 应该完全隐藏，因为其中的所有列表项都有一个“隐藏”类。虽然 container1 显示，因为并非所有列表项都具有“隐藏”类。

正如您所看到的，我已经使用“each”函数来遍历容器，但我被困在如何实现它将检查特定类的每个列表项的位置。我的想法是在其中执行另一个每个功能？但不确定...

感谢您的关注。

4

5 回答 5

3

打代码高尔夫：

$('.container').each(function() {
    $(this).toggle(!!$('li:not(.hidden)',this).length);
});

http://jsfiddle.net/mblase75/Ajjkc/

于 2013-01-09T19:03:15.867 回答
1 
container.each(function() {
    var $this = $(this);
    if ( $this.find('li:not(.hidden)').length ) {
        $this.show();
    } else {
        $this.hide();
    }
});

这是小提琴：http: //jsfiddle.net/5AHQZ/

于 2013-01-09T19:00:09.770 回答
1

当隐藏项的数量等于所有列表项时，您可以进一步选择 with containeras context并隐藏容器。否则显示。

$('.container').each(function() {
  var li1 = $('li', $(this)).length;
  var li2 = $('li.hidden', $(this)).length;
  if (li1 == li2)
    $(this).hide();
  else
    $(this).show();
});

请参阅JSFiddle进行测试。

于 2013-01-09T19:05:58.860 回答
0

你缺少的是这样的东西是你循环：

jQuery(document).ready(function($) {
     var container = $('.container > ul > li');

     container.each(function(index, element) {
          if($(element).hasClass('hidden')){
            $(element).css({display: 'none'});
          }
     });
});

我也修改了选择器。

问候，

于 2013-01-09T19:01:29.440 回答
0 
$('.container').each(function() {
    if ($(this).find('.item.hidden').length == $(this).find('.item').length)
        $(this).hide();
    else
        $(this).show();        
});
于 2013-01-09T19:01:58.363 回答