jQuery：如何用變量設置對象鍵的數量和鍵值本身來創建數組的對象？

Question

我試圖圍繞這個包裹我的頭，並希望你能幫助。

我的目標是創建arrays每個key由variable設定的object這key的values是另一個array過濾結果。

好吧，這是複雜的寫，這裏有一個例子：

<!-- Markup --> 
<section id="container"> 
    <article class="class-1">1</article> 
    <article class="class-2">2</article> 
    <article class="class-3">3</article> 
    <article class="class-4">4</article> 
    <article class="class-5">5</article> 
    <article class="class-6">6</article> 
    <article class="class-7">7</article> 
    <article class="class-8">8</article> 
    <article class="class-9">9</article> 
</section> 

// Desired outcome: 
// plugin variables are 
    { columns:3 } 

var cols = { 
    1 : [ $('.class-1') , $('.class-4') , $('.class-7') ], 
    2 : [ $('.class-2') , $('.class-5') , $('.class-8') ], 
    3 : [ $('.class-3') , $('.class-6') , $('.class-9') ] 
}; 

// my jQuery so far: 
// note : columns == 3 

var cols = $.map($('article','#container') , function(item, i) { 
       return {[ i%columns+1 : item ]}; 
      }); 

如何能夠做到什麼，我需要在這裏？ 我在做什麼錯？

任何幫助將不勝感激。

感謝您的閱讀，

Jannis

Answer 1

我想我看到你想要什麼去做。您希望文章自動排序爲加載時的列圖，對不對？我不認爲.map會讓你到那裏，因爲它會返回一個數組。在你想要的輸出中，你有一個對象，每列都有鍵。我想你想要的是沿着線的東西：

var columns = 3; 
var cols = {}; 

$(document).ready(function(){ 
    $('article','#container').each(function(index, value){ 
     var col = index%columns + 1; 
     if(cols[col] === undefined){ 
      cols[col] = [$(value)]; 
     } else { 
      cols[col].push($(value)); 
     } 
    }); 
}); 

Answer 2

如何about like this：

var mapFunc = function(){ return $(this); }, 
    articles = $('#container article'), 
    info = { columns: 3 }, 
    cols = { 
     '1': articles.filter(':nth-child(3n + 1)').map(mapFunc).get(), 
     '2': articles.filter(':nth-child(3n + 2)').map(mapFunc).get(), 
     '3': articles.filter(':nth-child(3n + 3)').map(mapFunc).get() 
    }; 

或者一個更動態的方法：

cols = {};  
for(var i = 1; i <= info.columns; i++) 
    cols[i] = articles 
     .filter(':nth-child(' + info.columns + 'n + ' + i + ')') 
     .map(mapFunc).get()