如何使用JQuery嵌套for-each循环以获取特定的li元素？

What I'm trying to do is essentially go through uls which are organized like

我想要做的就是通过有组织的uls

<ul class="some-ul">
    <li class="some-li"></li>
    <li></li>    
    <li></li>
    <li class="some-li"></li>
</ul> 
<ul class="some-ul">
    <li class="some-li"></li>
    <li></li>    
    <li></li>
    <li></li>
</ul> 
<ul class="some-ul">
    <li class="some-li"></li>
    <li class="some-li"></li>    
    <li class="some-li"></li>
    <li class="some-li"></li>
</ul>

and do something with the lis of class some-li and something else with the lis that don't have that class. So, it would be equivalent to

并且在没有那个班级的情况下,使用lis类和其他类似的lis做一些事情。所以,它等同于

$('ul.some-class li.some-class').each(function() {
   // do something
});

$('ul.some-class li:not(.some-class)').each(function() {
   // do something else
});

except I want to do it like

除了我想这样做

$('ul.some-class').each(function() {
     // loop through the list elements of this list 
});

but I don't know how to construct that inner loop. Is this possible, and if so, what tool should I using?

但我不知道如何构建内循环。这是可能的,如果是这样,我应该使用什么工具?

4 个解决方案

#1

Within .each, this will be the current element of the iteration. You can then use $(this).find() to find elements within it:

在.each中,这将是迭代的当前元素。然后,您可以使用$(this).find()来查找其中的元素:

$('ul.some-ul').each(function(i, ul) {
    $(ul).find("li").each(function(j, li) {
        // Now you can use $(ul) and $(li) to refer to the list and item
        if ($(li).hasClass('some-li')) {
            ...
        }
    });
});

#2

You can use hasClass and a CSS selector to get all immediate children (The <li>s).

您可以使用hasClass和CSS选择器来获取所有直接子项(

s)。

$('ul.some-class > li').each(function() {
     if ($(this).hasClass('some-class')) {
         //Do something
     } else {
         //Do something else
     }
});

#3

Loop through all the <li> and use hasClass() to see if they fit the class you want or not and react accordingly

循环遍历所有

并使用hasClass()来查看它们是否适合您想要的类,并做出相应的反应

$('.some-ul').children().each(function(){
   // "this" is current li
   if ( $(this).hasClass('some-li') ){
       $(this).doSomeClassThing();
   } else {
        $(this).doNoClassThing();
   }    
});

One pass through and you are done

一次通过,你就完成了

#4

The callback of the each call gets the index and the element as arguments.

每次调用的回调都将索引和元素作为参数。

This way you can

这样你就可以

$('ul.some-class').each(function(i, elt) { 
     $(elt, 'li.some-class').each ...
 });

https://api.jquery.com/jquery.each/

#1