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

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

请查看我目前的代码：

<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>

jQuery（文档）.ready（函数（$）{
var container=$（'.container'）；
container.each（函数（）{
//如果所有列表项都具有隐藏类，则隐藏父容器
container.hide（）；
//如果并非所有列表项都具有隐藏类，则显示父容器
container.show（）；
});
});

第1项
项目2
第3项
第4项


项目1
项目2
项目3
项目4

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

正如您所看到的，我已经使用“each”函数来迭代容器，但是我一直在研究如何实现它在哪里检查特定类的每个列表项。我的想法是执行其中的另一个功能？但不确定

谢谢你的关注

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

这是小提琴：

---

这是小提琴：

您缺少的是类似于以下内容的东西，即您的循环：

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

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

我也修改了选择器

---

在这方面，

您缺少的是类似于以下内容的内容：

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

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

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

我也修改了选择器

关于玩代码高尔夫：

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

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

打代码高尔夫：

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

---

当隐藏项的数量等于所有列表项时，您可以进一步选择使用

container

as并隐藏容器。表现得不一样

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

---

有关测试，请参阅。

当隐藏项的数量等于所有列表项时，您可以进一步选择使用

容器作为并隐藏容器。表现得不一样

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

请参阅以进行测试。
为什么需要执行第二个操作（“如果并非所有列表项都有隐藏的类，则显示父容器”）？哦，因为这实际上是一个作为回调调用的函数，所以如果它隐藏它，还需要显示是否满足条件。为什么需要执行第二个操作(“如果并非所有列表项都具有隐藏类，则显示父容器”）？哦，因为这实际上是一个作为回调调用的函数，所以如果它隐藏了它，它还需要显示它是否满足条件。这似乎是可行的，但是当再次调用它时，容器没有显示…换句话说，它正确地隐藏了它，但是第二次调用它不会使容器再次出现。这可能是因为e容器处于隐藏状态，“每个“功能无法看到它吗？若然，如何补救？感谢您的回答这似乎有效，但是当再次调用时，容器不会显示…换句话说，它正确地隐藏了它，但再次调用它不会使容器再次显示。这可能是因为一旦容器被隐藏，“each”函数就看不到它了吗？若然，如何补救？谢谢你的回答