JQuery - 从 UL 列表中查找列表项最少的 UL

Question

嗨，这就是我想要实现的目标。我有一个 ID="columns"的 div，在本例中我有 3 列，但可能会有更多或更少...我正在使用 JQuery 动态添加列表项。

<div id="columns">
   <ul id="column1" class="column">
   </ul>
   <ul id="column2" class="column">
   </ul>
   <ul id="column3" class="column">
   </ul>
</div>

我正在使用以下内容来获取 UL 列表

var columns = $("#columns ul");

现在，我想做的是在添加动态 LI 时，我想循环遍历这些列并将其添加到列表项数量最少的列...

我使用以下方法获取特定列的项目数

var countColumn1 = $("#column1").children().length;

所以我已经快到了，只需要一点帮助来遍历动态 var 列，然后返回长度最短的 UL。

希望这是有道理的。

坦克!

伊恩

Answer 1

使用带有自定义比较函数的columns.sort()方法:

function compareColumnLength(c1, c2) {
    return $('li', c1).length - $('li', c2).length;
}

然后将新列表项附加到 columns.first()

编辑更多代码:

var shortest = $("#columns ul").sort(compareColumnLength).first();
var item = $('<li/>').appendTo(shortest);

编辑请参阅此 fiddle : http://jsfiddle.net/sinsedrix/DYT5G/