Distribute content to different lists using jQuery

Question

I have 3 different lists (ul). Every time a user clicks a link, I want some content to be added to one of the lists with the smallest content. Suppose these are lists:

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

when the user clicks on the link, some content should be added to the 3rd list. ( #column3 ). How can I achieve this? Thanks.

PS: It would be better if the content (say content.php) loads with a downloadable message. Value:

Before:

 <li>Loading...</li> 

After

 <li>....CONTENT.....</li> 

Answer 1

Here is what occurred to me:

 $('#add').click(function() { var columns = $('.column'); columns.sort(function(a, b) { return $(a).children('li').length - $(b).children('li').length; }); $('<li>Loading...</li>').appendTo($(columns).first()).load('content.php'); }); 

Here jsfiddle

Answer 2

This feels hacky, but I can't come up with a cleaner way:

 $('#clicker').click(function(){ var smallList; var smallest = 1000; $('ul').each(function(){ var curLength = $("> li", this).length; if(smallest > curLength ){ smallest = curLength; smallList = this; } }); //add content to smallList }); 

Spell here: http://jsfiddle.net/5HZ4W/

If you have two ul with the same number of children, the first will be used.

Answer 3

 //declare a function for the JavaScript `sort()` function function sortNumber(a,b) { return a - b; } //add event handler to the click of all `a` elements $('a').on('click', function () { //setup array of `ul` elements and then another array of the number of children each has var cols = [$('#column1').children('li'), $('#column2').children('li'), $('#column3').children('li')], arr = [cols[0].length, cols[1].length, cols[2].length]; //sort the array with the number of children numerically arr.sort(sortNumber); //iterate through the `ul` elements until the the first one that has the lowest number of children is found for (i in cols) { if (cols[i].length == arr[0]) { //append a new `li` element to the `ul` element with the fewest children cols[i].parent().append('<li>hola</li>'); break; } } }); 

Here's jsfiddle: http://jsfiddle.net/jasper/AcadK/1/

Answer 4

Try the following:

 // HTML // <ul id="column1" class="column"> <li>item</li><li>item</li> </ul> <ul id="column2" class="column"> <li>item</li><li>item</li> </ul> <ul id="column3" class="column"> <li>item</li> </ul> <a href="#" id="button">Click to add</a> // JS // <script type="text/javascript"> $(document).ready(function(){ $('#button').click(function(e){ e.preventDefault(); var num = 1000; var $list; $('.column').each(function(){ if ($('li', this).length < num){ $list = $(this); num = $('li', this).length; } }); $list.append('<li>item</li>'); }); }); </script> 

Spell here: http://jsfiddle.net/7rRQs/2/

Hope this helps!

Answer 5

Hmm, first of all, you should check the LI length in the lists. Or you can make a counter that will go through the list index, and then add a new LI.

 var App = { lists: ['#column1', '#column2', '#column3'], index: 0, getList: function () { if (this.index == this.lists.length + 1) { // verifying if it in the last column index this.index = 0; return App.lists[0]; } else { return App.lists[this.index++]; } } }; // global configs $("#myLink").bind('click', function () { var $li = $(App.getList()).append('<li></li>'); $.ajax({ url: 'getLastLalala.php', beforeSend: function () { $li.text('Loading...'); }, success: function (data) { $li.html(data); } }); });