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

【问题标题】：Using jQuery to select all elements that have at least 2 children使用 jQuery 选择所有至少有 2 个子元素的元素
【发布时间】：2019-08-20 22:45:08
【问题描述】：

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

jQuery 有没有办法只选择至少有 2 个 <li> 子级的 <ul> 元素？谢谢！

此代码还将选择此示例中的第一个 <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>

【问题讨论】：

标签： javascript jquery jquery-ui dom

【解决方案1】：

使用filter()

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

你可以这样试试：

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

【讨论】：

将不必要地在同一个元素上多次初始化插件