JQuery - Finding from a list of ULs, the UL with the least List items

Question

Hi here's what I'm trying to accomplish. I have a div with ID="columns", in this example I have 3 columns, but there may be more or less... I'm using JQuery to add list items dynamically.

<div id="columns">
   <ul id="column1" class="column">
   </ul>
   <ul id="column2" class="column">
   </ul>
   <ul id="column3" class="column">
   </ul>
</div>

I'm using the following to get a list of UL's

var columns = $("#columns ul");

Now, what I'd like to do is when adding a dynamic LI I'd like to loop through these columns and add it to the column with the least amount of list items...

I'm getting the count of items for specific columns using the following

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

So I'm nearly there, just need a little assistance traversing through the dynamic var columns and then returning the UL with the shortest length.

Hope this makes sense.

Tanks!

Ian

Answer 1

Use columns.sort() method with a custom compare function:

function compareColumnLength(c1, c2) {
    return $('li', c1).length - $('li', c2).length;
}

Then append your new list item to columns.first()

EDIT More code:

var shortest = $("#columns ul").sort(compareColumnLength).first();
var item = $('<li/>').appendTo(shortest);

EDIT See this fiddle: http://jsfiddle.net/sinsedrix/DYT5G/

Answer 2

how about this...

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
}

NOTE: If more than more column has the same least number of items, the first found one will be referenced

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

Try this:

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

Here's a little example that will add a text to the ul with the lowest length: 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>