jQuery each this

Question

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

为什么会出现错误提示：

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

从上面的代码中获得什么信息？

- o01

---

尝试用 $() 将 this 包装起来，像这样：$(this)，确保它被视为 jQuery 对象。 - Thor Jacobsen

虽然可以理解你为什么认为它与函数作用域有关，但实际上并不是。 - T.J. Crowder

@T.J. 是的，我现在意识到了...重新标记？ - o01

可能，更改标题。基本上只是一个直接的jQuery问题。最好， - T.J. Crowder

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

- Tomalak

---

1分钟，5个赞 === jQuery特效。同时，每个循环都是从0开始的，所以他将类名“first”添加到第二个元素。 - Raynos

@Orolin：因为each函数内的this是指向原始DOM元素的引用，所以如果你想使用jQuery函数，你需要为该元素创建一个jQuery实例：详见文档。 - T.J. Crowder

@Tomalak，我认为.each从0开始给出索引，所以在你的第二个代码片段中应该使用$('.promo-slide:eq(1)')。 - sharat87

@Raynos, @Shrikant: 是的，你们说得完全正确。我会修复这个问题。 - Tomalak

关于“jQuery效应”，我自己觉得有点尴尬。在这个网站上，有很多更好、更花时间写作的答案却几乎没有得到投票，而那些非常明显的答案却很快就能得到高票数。 - Tomalak

Answer 2

您可能希望执行以下操作：

$(this).addClass

- ninjagecko