Question

我需要选择所有.sortable <ul>元素，但我只需要具有两个或更多子元素的元素（<li>元素）。

jQuery是否可以通过某种方式选择至少具有2个<ul>子级的<li>元素？谢谢！

在此示例中，此代码还将选择第一个<ul>，实际上应将其忽略（因为它只有一个孩子）。

$('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

使用filter()

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

Answer 2

将.filter与回调函数一起使用：

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

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

3 个答案: