jQueryを使用して異なるリストにコンテンツを配信

Question

私は3つの異なるリスト（ul）を持っています。ユーザーがリンクをクリックするたびに、最小限のコンテンツを持つリストの1つにいくつかのコンテンツを追加したい。 は、これらがリストであると仮定します。

<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> 

ユーザーがリンクをクリックしたときに、一部のコンテンツは、第三のリストに追加する必要があります。 （#column3）。どのように私はこれを達成することができますか？ありがとう。

PS： ロードメッセージと内容（たとえばcontent.php）負荷場合、それは良くなります。意味：これはハック感じているが、私はクリーンな方法を考えることはできません

<li>Loading...</li> 

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

Answer 1

は、ここに私の頭に浮かんだものだ：すべての答えのための

$('#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

Answer 2

後：ここ

$('#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 
}); 

はフィドル：http://jsfiddle.net/5HZ4W/

前

同じ数の子を持つ2つのulがある場合、最初のものが使用されます。

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

ここjsfiddleです：http://jsfiddle.net/jasper/AcadK/1/

Answer 4

次のことを試してみてください。ここ

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

はフィドル：http://jsfiddle.net/7rRQs/2/

私はそれが役に立てば幸い！

Answer 5

まず、リストのLIの長さを確認する必要があります。または、リストのインデックスをループするカウンタを作成し、新しいLIを追加することもできます。

var App = { 
    lists: ['#column1', '#column2', '#column3'], 
    index: 0, 
    getList: function() { 
     if (this.index == this.lists.length + 1) { // verifying if it's 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); 
     } 
    }); 
});