Array of JQuery Selectors

Question

for convenience I wanted to be able to reference my JQuery selectors from an array rather than individually. I was led to believe that the following logic would enable me to do so:

var reference = $('.class');

reference[0].<function>;

instead of:

$reference1 = $('#id1');
$reference2 = $('#id2');
$reference3 = $('#id3');

$reference1.<function>

all of my elements have the appropriate class and are being populated into the array(?) but for some reason I can't then call JQuery functions from the array in the same way I can with a single selector. Is there something I'm missing or a reason I can't do this?

jsfiddle.net/Shef/mWaRf this was the example I was basing it off. — Alec Gamble
– Alec Gamble, Commented Nov 23, 2015 at 12:02
It's not clear what you want - one jQuery collection or one per element? — Roamer-1888
– Roamer-1888, Commented Nov 23, 2015 at 12:03
You can use .eq( index ) to create a jQuery object containing a single element, is that what you want? — billyonecan
– billyonecan, Commented Nov 23, 2015 at 12:04
I guess a JQuery collection? Although I'm new to this and don't know exactly what I'm talking about (obviously). I just want a single variable I can reference which stores (like an array) a JQuery reference to each instance of a specific class in my html. — Alec Gamble
– Alec Gamble, Commented Nov 23, 2015 at 12:42

Satpal · Accepted Answer · 2015-11-23 12:03:20Z

2

Your first example code doesn't works as reference[0] will fetch underlying DOM element and those doesn't have jQuery methods, thus you must be getting error.

.eq(index) can be used

Reduce the set of matched elements to the one at the specified index.

Change your code as

var reference = $('.class');
reference.eq(0).fn()

answered Nov 23, 2015 at 12:03

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

2 Comments

Alec Gamble Over a year ago

I tried to use this exactly but I can't make it work for me. I'm using the velocity.js and blast.js libraries so when I call it it looks like: reference.eq(0).blast({delimeter:"word}).velocity(...velocityFunction...);

Alec Gamble Over a year ago

I can make exactly the same call when using $reference1.blast({delimeter:"word}).velocity(...velocityFunction...); which works fine for me. But I just don't want to have to declare a stupid amount of variables at the beginning of my js file.

Bas Dirks · Accepted Answer · 2015-11-23 16:18:18Z

1

reference[0] refers to an Element instead of a jQuery object.

If you want to refer to the first object matching a selector, use .first():

/* This returns a jQuery object. */
reference.first();

If you want the object at index n, use ':eq(n)' in your selector, or the eq() method. These are zero-indexed:

/* This returns a jQuery object. */
$('.class:eq(n)');
/* This returns a jQuery object. */
reference.eq(n);

You could also "re-wrap" an element, but this is not idiomatic:

/* This returns an Element. */
reference[n];
/* This returns a jQuery object. */
$(reference[n]);

Similarly, you could use get. But the methods above are preferable:

/* This returns an Element. */
reference.get(n);
/* This returns a jQuery object. */
$(reference.get(n));

What wrapping means:

This is our page:

<!DOCTYPE html>
<html>
<head>
    <title>Hey</title>
</head>
<body>
    <p>You</p>
    <p>!!!</p>
</body>
</html>

This creates a jQuery object named $p, selecting the two <p> Elements:

/* This returns a jQuery object. */
var $p = $('p');

This object has all those useful jQuery methods we love:

$p.css('color', 'purple'); /* this colors all paragraphs purple */

Like I said, we can select the second (or first) paragraph with .eq():

/* This returns a jQuery object. */
$p.eq(1); /* this selects the second paragraph (because indices start at 0) */

Or we could do it like you were trying to do:

/* This returns an Element. */
$p[1];

But this gives us a plain old Element, and not a jQuery object. However, if we apply the jQuery function, we get back a jQuery object, and we can use all our beloved jQuery methods:

$($p[1]).text('???');

Applying $ again to an Element is what I called re-wrapping.

edited Nov 23, 2015 at 16:18

answered Nov 23, 2015 at 12:07

Bas Dirks

4113 silver badges7 bronze badges

2 Comments

Alec Gamble Over a year ago

this was very helpful to know, with regards to the second option can I only use that to refer to specifically to the nth instance of class? and I'm not entirely sure what rewraping an element means I'm afraid, obvious rookie here.

Bas Dirks Over a year ago

Updated answer with additional explanation.

Collectives™ on Stack Overflow

Array of JQuery Selectors

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related