jquery - 如何找到包含 child 最少的 parent ？

Question

我们有两个相邻的容器，里面有容器。

<ul class="containers">
    <li>Matt</li>
    <li>John</li>
    <li>Mark</li>
</ul>
<ul class="containers">
    <li>Roger</li>
    <li>Bill</li>
    <li>Lara</li>
    <li>Miriam</li>
    <li>Dylan</li>
    <li>Harry</li>
</ul>

什么是最优化的方法来理解和检索“容器”，并且里面的子元素最少？

Answer 1

var $el = $('ul.containers:first');

$('ul.containers').each(function(){
  if( $(this).children().length < $(this).next('ul.containers').children().length ){
    $el = $(this);
  }
});

console.log( $el ); //$el is now the parent with the least children.

或者稍微短一点的版本，只有一行 if:

var $el = $('ul.containers:first');

$('ul.containers').each(function(){
  $el = $(this).children().length < $(this).next('ul.containers').children().length ? $(this) : $el ;
});

console.log( $el ); //$el is now the parent with the least children.