jQuery each this

Question

var slides = $(".promo-slide");
slides.each(function(key, value){
    if (key == 1) {
        this.addClass("first");
    }
});

Why do I get an error saying:

Uncaught TypeError: Object #<HTMLDivElement> has no method 'addClass'

From the above code?

Try wrapping `this` in `$()`, like this: `$(this)` to make sure it's treated like a jQuery object. — Thor Jacobsen, Jun 20 '11 at 09:16
Although one can see why you thought it was, this isn't actually related to function scope. — T.J. Crowder, Jun 20 '11 at 09:17
Probably, and change title. Pretty much just a straight jQuery question. Best, — T.J. Crowder, Jun 20 '11 at 09:20

Tomalak · Accepted Answer · 2021-11-13T09:22:53.897

34

Inside jQuery callback functions, this (and also value, in your example) refers to a DOM object, not a jQuery object.

var slides = $(".promo-slide");
slides.each(function(key, value){
    if (key == 0) { // NOTE: the key will start to count from 0, not 1!
        $(this).addClass("first"); // Or $(value).addClass("first");
//------^^----^       
    }
});

BUT: In your case, this is easier:

$(".promo-slide:first").addClass("first");

And when all .promo-slide elements in the same container, a solution in pure CSS is even easier:

.promo-slide:first-child {
    /* ... */
}

As an aside, I find it a useful convention to prefix variables that contain a jQuery object with a $:

var $slides = $(".promo-slide");
$slides.each( /* ... */ );

edited Nov 13 '21 at 09:22

answered Jun 20 '11 at 09:15

Tomalak

332,285
67
532
628

3

1 Minute, 5 upvotes === jQuery effect. Also the each loop is 0 based so he's adding the class "first" to the second element. – Raynos Jun 20 '11 at 09:17
@Orolin: ...because `this` within the `each` function is a reference to the raw DOM element, so if you want to use jQuery functions, you have to make a jQuery instance for that element: [Details in the documentation.](http://api.jquery.com/each/) – T.J. Crowder Jun 20 '11 at 09:18
1

@Tomalak, I think `.each` gives indexes starting from 0, so you should do `$('.promo-slide:eq(1)')` instead, in your second code fragment. – sharat87 Jun 20 '11 at 09:19
@Raynos, @Shrikant: Yes, you are absolutely correct. Will fix this. – Tomalak Jun 20 '11 at 09:19
3

@Raynos: Regarding the "jQuery effect" - I find that a little embarrassing myself. There are far better and more "costly" answers (in terms of time needed to write) on this site that hardly catch a vote, while the really obvious ones go through the roof in no time. – Tomalak Jun 20 '11 at 09:23

score 3 · Answer 2 · answered Jun 20 '11 at 09:42

3

You probably want to do:

$(this).addClass

answered Jun 20 '11 at 09:42

ninjagecko

88,546
24
137
145

jQuery each this

2 Answers2

Linked

Related