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>

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

5 个答案: