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

回答

相关问题