我如何在引導

拆分動態內容爲多列有三個格：我如何在引導

<div class="col-xs-4"></div> 
<div class="col-xs-4"></div> 
<div class="col-xs-4"></div>

裏面第一個div中，有2項與「新增」按鈕。通過每次單擊「添加新」按鈕，都會創建一個新項目。因此，該結構是這樣的：

<div class="col-xs-4"> 
    <p>Item 1</p> 
    <p>Item 2</p> 
    <button>Add New</button> 
</div>

現在，我想，當第一列包含5個元素，它會停在該專區添加新的項目。因此，「添加新的」按鈕將顯示在第二列，然後第6項也將被添加到第二列。因此，從第11項開始，它們將被添加到最後一列。第15項後，不會添加任何項目。

所以，可視化是這樣的：

我怎樣才能讓功能？ Here is my fiddle。

來源

2015-01-12 user1896653

認爲你有一個m x n表，在這種情況下5×3

轉到每列填寫第一：

var count = $('.single').length, 
    $cols = $('.col-xs-4'), 
    maxPerColumn = 5; 

$('body').on('click', '.add-new', function(event) { 
    // We stop at 3 * 5 = 15 this way 
    if(count >= ($cols.length * maxPerColumn)) 
     return; 

    // Math.floor(count/maxPerColumn) is the integer division between current item count, 
    // and max items allowed per count - will go from 0 to 14/5 = 2, remainder 4. 
    $cols.eq(Math.floor(count/maxPerColumn)).append($('.single').eq(0).clone()); 
    count++; 

}); 

$('body').on('click', '.remove', function() { 
    $(this).parent().remove(); 
});

Check the fiddle - 進一步的行爲，像項目拆除，留給你。

來源

2015-01-12 17:17:59 moonwave99

這很好。但是，在「刪除」某個項目後，效果不佳，就像從第一列中刪除兩個項目而不是在該列中添加5個項目一樣，則通過「添加新」按鈕添加了3個項目。 – user1896653

@ user1896653'進一步的行爲，如刪除項目，留給你'：）） – moonwave99

我如何在引導

回答

相關問題