javascript - jQuery 每个这个

Question

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

为什么我会收到一条错误消息:

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

从上面的代码？

Answer 1

在 jQuery 回调函数中，this(在您的示例中还有 value)指的是 DOM 对象，而不是 jQuery 对象。

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");
//------^^----^       
    }
});

但是:在您的情况下，这更容易:

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

当所有 .promo-slide 元素都在同一容器中时，纯 CSS 的解决方案甚至更容易:

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

顺便说一句，我发现在包含 jQuery 对象的变量前加上 $ 前缀是一个有用的约定:

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