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

嗨，这是我想要完成的。我有一个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>

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

我使用以下公式获得特定列的项目数

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

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

希望这是有意义的

坦克

伊恩这个怎么样

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

var shortest = null;

for(i = 0; i < columns.length; i++){
  var column = $(columns[i]);

  if(shortest == null){
     shortest = column;
  }
  else if(column.children().length < shortest.children().length){
     shortest = column;
  }
}

//you can now use shortest as the column with the least items
if(shortest != null)//check if at least one column found
{
   //here shortest will be a jquery object for the ul with the least items
}

var columns=$（“#columns ul”）；
var=null；
对于（i=0；i

注意：如果多个列具有相同的最少项数，则第一个找到的列将被引用。

使用

列。sort（）

方法和自定义比较函数：

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

然后将新列表项附加到

列。first（）

编辑更多代码：

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

var shortest=$（“#columns ul”）.sort（compareColumnLength）.first（）；
变量项=$（“
”）.appendTo（最短）；

编辑查看此小提琴：

var ulWithMinItems=null；
$（“#列ul”）。每个（函数（索引）{
如果（索引==0）
ulWithMinItems=此；
如果（$（this）.children（）.length请尝试以下操作：


var ul_与_least_li=$（“#列ul:first”）；
var least_li_count=ul_，子项（“li”）长度最小；
$。每个（$（“#ul列”），功能（i，项）{
if（$（项目）.children（“li”）.length<最小li计数）{
ul_，最小值为$（项目）；
最小（li）计数=最小（li）子项长度的ul（ul）；
}
});
console.log（ul_和_-least_-li）；
console.log（最少\u li\u计数）；
ul_加上_least_li.追加（“
我有最少的li
”）；
以下是一个小示例，它将以最小长度向
ul
添加文本：

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var-len=0；
var-theobj=null；
$（“#列ul”）。每个（函数（）{
var cur=$（this）.children（）.length；
如果（curtext”）；
});
});

正文
正文


正文


正文
正文

添加文本
hmmm，这两个答案现在提供了最长的答案……只有我能看到“最短”这个词吗？：SHi，谢谢你的快速回复。好吧，这似乎有效，但仍有一些问题需要解决。列表项嵌套了UL和LI，我如何只检查顶部UL下的LI？当然，必须有一个快速解决方案…非常感谢！明白了，$（“#columns>UL”）；如果我没弄错的话…谢谢帮助谢谢！似乎对我的场景有效（我实际上也有嵌套的UL和LI……事实上，没有……最短的似乎只有在列表中没有项目时才起作用，否则它返回“未定义”相同的问题，有嵌套的UL和喜欢的……我在谷歌搜索；）明白了！$（“#columns>UL”）.sort（compareColumnLength）。first（）；
var shortest = $("#columns ul").sort(compareColumnLength).first();
var item = $('<li/>').appendTo(shortest);

  var ulWithMinItems = null;
    $("#columns ul").each(function(index){
       if(index == 0)
            ulWithMinItems = this;
       if($(this).children().length <= $(ulWithMinItems).children().length)
            ulWithMinItems = this;
    });

//ulWithMinItems will hold your ul with most children.

var ul_with_least_li = $("#columns ul:first");
var least_li_count = ul_with_least_li.children("li").length;


$.each($("#columns ul"), function(i, item){
if ($(item).children("li").length < least_li_count) {
    ul_with_least_li = $(item);
    least_li_count = ul_with_least_li.children("li").length;
}
});


console.log(ul_with_least_li);
console.log(least_li_count);

ul_with_least_li.append("<li>I have the least LIs</li>");

$(document).ready(function () {
    $('button').click(function(){
        var len = 0;
        var theobj = null;
        $("#columns ul").each(function(){
            var cur = $(this).children().length;
            if (cur < len || len == 0) {
                len = cur;
                theobj = $(this);
            }
        });
        theobj.append('<li>text</li>');
    });
});

<div id="columns">
   <ul id="column1" class="column">
       <li>text</li>
       <li>text</li>
   </ul>
   <ul id="column2" class="column">
       <li>text</li>
   </ul>
   <ul id="column3" class="column">
       <li>text</li>
       <li>text</li>
   </ul>
</div>
<button>Add text</button>