简体   繁体   中英

Using jQuery to select all elements that have at least 2 children

I need to select all the .sortable <ul> elements, but I only need those that have 2 or more children ( <li> elements).

Is there some way for jQuery to just select <ul> elements that have at least 2 <li> children? Thanks!

This code also would select the first <ul> in this example, which should be actually ignored (because it only has 1 child).

 $('ul.sortable:has(li)').sortable({ axis: 'y', placeholder: 'list-group-item holder list-group-item-warning' }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="list list-group mb-4 sortable"> <li class="list-group-item" data-id="2">Amarillo</li> </ul> <ul class="list list-group mb-4 sortable"> <li class="list-group-item" data-id="1">Azul</li> <li class="list-group-item" data-id="3">Rojo</li> </ul> <ul class="list list-group mb-4 sortable"> <li class="list-group-item" data-id="9">Verde</li> <li class="list-group-item" data-id="8">Cafe</li> <li class="list-group-item" data-id="6">Naranja</li> <li class="list-group-item" data-id="7">Rosado</li> </ul> 

Use filter()

$('ul.sortable').filter(function(){
   return $(this).children().length > 1;
}).sortable({
    axis: 'y',
    placeholder: 'list-group-item holder list-group-item-warning'
});

Use .filter with a callback function:

 const uls = $('ul.sortable:has(li)') .filter(function() { return $(this).children('li').length >= 2; }); console.log(uls.length); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="list list-group mb-4 sortable"> <li class="list-group-item" data-id="2">Amarillo</li> </ul> <ul class="list list-group mb-4 sortable"> <li class="list-group-item" data-id="1">Azul</li> <li class="list-group-item" data-id="3">Rojo</li> </ul> <ul class="list list-group mb-4 sortable"> <li class="list-group-item" data-id="9">Verde</li> <li class="list-group-item" data-id="8">Cafe</li> <li class="list-group-item" data-id="6">Naranja</li> <li class="list-group-item" data-id="7">Rosado</li> </ul> 

您可以这样尝试:

$('.sortable li+li').parent()

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM