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

编辑看这个小提琴： http : //jsfiddle.net/sinsedrix/DYT5G/

Answer 2

这个怎么样...

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
}

注意：如果多于一列的项目数最少，则第一个找到的项目将被引用

Answer 3

  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.

Answer 4

尝试这个：

http://jsfiddle.net/wngchng87/s7wTg/

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>");

Answer 5

这是一个小示例，它将以最小的长度向ul添加文本： http : //jsfiddle.net/x8Up8/13/

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