使用jQuery选择具有至少2个子元素的所有元素

Question

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> 

Answer 1

Use filter()

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

Answer 2

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> 

Answer 3

您可以这样尝试：

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