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

时间:2021-07-30 00:21:16

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


    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/