jQuery: Как я могу создать объект массивов с переменными, устанавливающими количество ключей объекта и само значение ключа?

Question

Я пытаюсь обернуть голову вокруг этого и надеялся, что вы поможете.

Моя цель - создать object из arrays, где каждый key установлен как variable, а values из этого key является отфильтрованным результатом другого 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

Как примерно так :

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