Question

I have 3 different lists (ul). Each time a user clicks a link, I want some content to be added to one of the lists with the least content.
Suppose these are the 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 achive this? Thanks.

PS:
It will be better if the content (say content.php) loads with a loading message. Meaning:

Before:

<li>Loading...</li>

After

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

Answer 1

Here’s what came to my mind:

$('#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’s a jsfiddle