jQuery: How can I create an object of arrays with variables setting the number of object keys and the key value itself?

Question

I'm trying to wrap my head around this and was hoping you could help.

My goal is to create an object of arrays where each key is set by a variable and the values of this key are a filtered result of another array.

Okay, that was complicated to write, here is an example:

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

How can I achieve what I need here? What am I doing wrong?

Any help would be much appreciated.

Thanks for reading,

Jannis

RSG · Accepted Answer · 2011-03-25 22:07:26Z

1

I think I see what you're trying to do. You want the articles to automatically sort into a map of columns on load, right?

I don't think .map is going to get you there because it will return an array. In your desired output you have an object with keys for each column. I think what you want is something along the lines of:

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

answered Mar 25, 2011 at 22:07

RSG

7,1436 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jannis Over a year ago

This is exactly what I wanted to create, thank you very much!

Josiah Ruddell · Accepted Answer · 2011-03-25 22:06:44Z

0

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

Or for a more dynamic approach:

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

edited Mar 25, 2011 at 22:06

answered Mar 25, 2011 at 21:57

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

1 Comment

Jannis Over a year ago

Thanks for your solution, I prefer RSG's solution in this case but regardless this (especially the second solution) is great and I will keep it in mind for future use. Thanks again.

Collectives™ on Stack Overflow

jQuery: How can I create an object of arrays with variables setting the number of object keys and the key value itself?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related