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?

Answer 1

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( /* ... */ );

Answer 2

You probably want to do:

$(this).addClass