Question

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

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

<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，因为所有列表项都有一个“隐藏”类。虽然容器1显示，但并非所有列表项都具有“隐藏”类。

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

感谢您的光临。

Answer 1

打码高尔夫：

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

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

Answer 2

container.each(function() {
    var $this = $(this);
    if ( $this.find('li:not(.hidden)').length ) {
        $this.show();
    } else {
        $this.hide();
    }
});

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

Answer 3

当隐藏项目的数量等于所有列表项目时，您可以进一步选择container作为context并隐藏容器。另外显示。

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

请参阅JSFiddle进行测试。

Answer 4

你缺少的是像你这样的循环：

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

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

我也修改了选择器。

此致

Answer 5

$('.container').each(function() {
    if ($(this).find('.item.hidden').length == $(this).find('.item').length)
        $(this).hide();
    else
        $(this).show();        
});

遍历每个元素并通过jQuery执行操作的最佳方法

5 个答案: