jQuery：如何使用设置对象键数量和键值本身的变量创建数组对象？

Question

我正在努力解决这个问题，希望你能提供帮助。

我的目标是创建一个数组的对象，其中每个键由一个变量和设置此键的值是另一个数组的过滤结果。

好吧，写起来很复杂，这是一个例子：

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

我怎样才能实现我需要的东西？ 我做错了什么？

任何帮助将不胜感激。

感谢您的阅读，

詹尼斯

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

如何这样：

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