jquery loop to create dynamic-multiple vars

Question

I am not sure if this is possible, but I want to create a multiple vars dynamically, for instance, these are the vars I create manually,

var left_1 = $('.column-global.left .item-global').eq(0);
var left_2 = $('.column-global.left .item-global').eq(1);
var left_3 = $('.column-global.left .item-global').eq(2);

but the problem is I only need two or one vars above sometimes. but three is the max.

so I am thinking of passing a parameter into the function to tell the code to create either 2 or 3 vars,

// I declare empty vars first
var left_1;
var left_2;
var left_3;

// get the number from somewhere, from the class for instnace
var last_class = $(this).attr("class").split(' ').slice(-1); 

// loop the number with for loop
for( var i = 1; i <= last_class; i++){
    left_1 = $('.column-global.left .item-global').eq(i-1);
}

but you notice that I am stuck - how can I loop the var in the {} of the for-loop?

basically I want the for loop to produce the multiple vars like these (same as above),

var left_1 = $('.column-global.left .item-global').eq(0);
var left_2 = $('.column-global.left .item-global').eq(1);
var left_3 = $('.column-global.left .item-global').eq(2);

is it possible??

thanks.

p.s.

some answers here suggesting an array, but I have another problem further...

bcos I also need to pass the vars into another function which is kept within that parent function like this,

another_function(left_1, left_2, left_3);

so how can I achieve this with the array?? thanks

A jQuery object is (effectively) an Array. It doesn't make sense to store individually wrapped elements in an Array, when you already have them collectively wrapped in a jQuery Array. — user113716
– user113716, Commented Nov 4, 2010 at 15:00

user113716 · Accepted Answer · 2010-11-04 15:41:01Z

2

Instead of running the same selector 3 times and pulling out the item you want one at a time, why not just run it once and store that jQuery object?

var $globals = $('.column-global.left .item-global')

Then you can use whichever element(s) you need when you want.

$globals.eq(1).doSomething();

Or because a jQuery object is an Array-like object, you can get each individual DOM element by index, like:

$globals[1] // to get the actual non-jQuery wrapped DOM element

EDIT: With regard to the update in your question, first I'd rework the function if possible to accept 1 jQuery object.

If that is not possible, and you just need to pass individual arguments, I'd do one of two things.

First idea.

If possible, change the function so that it can accept DOM elements, then wrap them inside the function:

var $globals = $('.column-global.left .item-global');

another_function.apply( this, $globals.get() );

another_function(left_1, left_2, left_3) {
      // Wrap the DOM elements
    for( var i = 0, len = arguments.length; i < len; i++ ) {
        arguments[ i ] = $( arguments[ i ] );
    }
    // ...the rest of the code
}

By calling your another_function with .apply(), you're able to pass an Array of arguments, which will be assigned to the various parameters for the function.

Here we used jQuery's .get() method to pass an Array of DOM elements.

Second idea.

If you absolutely must accept individually wrapped DOM elements, do the same as above, but create the Array of individually wrapped elements like this:

var $globals = $('.column-global.left .item-global').map(function() {
    return $(this);
});

another_function.apply( this, $globals.get() );

This uses .map() to create a jQuery object of jQuery objects, then uses .get() to pull the Array out of the object.

But really I'd change your another_function if possible.

edited Nov 4, 2010 at 15:41

answered Nov 4, 2010 at 14:54

user113716

323k64 gold badges454 silver badges441 bronze badges

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

13 Comments

Run Over a year ago

thanks for this. I am working on it with your suggestions.thanks! :-)

user113716 Over a year ago

@lauthiamkok - You're welcome. Let me know if you have questions. :o)

Run Over a year ago

sorry, tried to make the $globals as you suggested but I still don't know how to get it right bcos I am passing a number of different vars into other functions from the parent function. u can have a look here on the functions I am working on - jsfiddle.net/7huET

Run Over a year ago

this is the outcome of the functions im trying to achieve, but these function only can apply to single circumstance/ page - i cannot apply them to other pages when I only need 2 vars. rokhsanafiaz.co.uk/news thanks!

user113716 Over a year ago

@lauthiamkok - Could you take your last jsFiddle example, and give a little HTML so I can see the relationship between the elements? It seems like this should be able to be simplified. Perhaps give what it looks like to begin with, then what it should look like after the click.

|

Diodeus - James MacFarlane · Accepted Answer · 2010-11-04 14:52:53Z

1

Why not use an array?

var left = []

for( var i = 1; i <= last_class; i++){
     left[i] = $('.column-global.left .item-global').eq(i-1);
}

or more likely, since arrays are 0-based:

for( var i = 0; i < last_class; i++){
     left[i] = $('.column-global.left .item-global').eq(i);
}i

answered Nov 4, 2010 at 14:52

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

2 Comments

Run Over a year ago

sorry I need to pass the vars into another function like this,

Run Over a year ago

loop_item(left_1, left_2, left_3); so how can I achieve this with the array?? thanks

Collectives™ on Stack Overflow

jquery loop to create dynamic-multiple vars

2 Answers 2

13 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related