JQuery - 從UL列表中查找帶有最少列表項的UL

嗨，這是我正在嘗試完成的。我有一個ID =「列」的div，在這個例子中我有3列，但可能有更多或更少...我使用JQuery動態添加列表項。JQuery - 從UL列表中查找帶有最少列表項的UL

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

現在，加入了動態李當我想要做什麼是我想要的清單，通過這些列循環並用它添加到與列表項最少的列...

我越來越項具體列的計數以下

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

所以我快到了，只需要一點點的幫助就可以遍歷動態變量列，然後以最短的長度返回UL。

希望這是有道理的。

坦克！

伊恩

來源

2012-02-07 Ianc22

使用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/

來源

2012-02-07 15:12:00 sinsedrix

+1：優秀的迴應。簡潔，清晰，功能強大的代碼。 – StriplingWarrior 2012-02-07 16:25:29

謝謝！似乎適用於我的情況（我實際上也嵌套了UL和LI的... – Ianc22 2012-02-07 21:00:39

其實，沒有..最短只似乎工作，如果沒有項目在列表中，否則它返回'undefined' – Ianc22 2012-02-07 21:12:48

這個怎麼樣...

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 
}

注：如果有超過列有相同的項數最少，第一個找到的人會被引用

來源

2012-02-07 15:11:39 musefan

您好，感謝您的快速回復。好，所以這似乎工作，但仍然與一些事情作鬥爭。列表項目嵌套了UL和LI，我如何才能檢查頂級UL下的LI？當然，必須有一個快速解決方案......非常感謝！ – Ianc22 2012-02-07 20:53:53

明白了，$（「＃columns> ul」）; 如果我沒有錯......感謝您的幫助 – Ianc22 2012-02-07 21:41:18

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.

來源

2012-02-07 15:15:08

嗯，那兩個答案現在提供了最長的時間......是我能看到單詞「最短」嗎？：S – musefan 2012-02-07 15:18:41

我的壞..剛剛修復.. – 2012-02-07 15:19:57

試試這個：

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

來源

2012-02-07 15:16:17 Greg

這裏有一個小例子，將添加一個文本到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>

來源

2012-02-07 15:25:00 Niklas

JQuery - 從UL列表中查找帶有最少列表項的UL

回答

相關問題