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>