jquery给TypeError从包装集中获取元素答案

【问题标题】：jquery giving TypeError getting elements from wrapped setjquery给TypeError从包装集中获取元素
【发布时间】：2014-03-08 07:48:38
【问题描述】：

我是一个菜鸟，通过一个练习来获取所有具有 alt 属性的 img 元素集合中的第一个元素。在 jQuery in Action 第 1 版的第 35 页，我在“Wrapped Set Lab”中输入以下命令：

$("img[alt]").get(0)

或者这个：

$("img[alt]")[0]

这两个命令都在控制台中给出了这个异常：

错误：TypeError Object# 没有方法 'addClass'

这是标记片段：

<div>
  <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus"/>
  <img src="images/image.2.jpg" id="littleBear" title="A dog named Little Bear"/>
  <img src="images/image.3.jpg" id="verbena" alt="Verbena"/>
  <img src="images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
  <img src="images/image.5.jpg" id="tigerLily" alt="Tiger Lily"/>
  <img src="images/image.6.jpg" id="coffeePot"/>
</div>

Yet another post in SOsuggested 这是正常的，并写信改用以下内容：

$("img[ALT]").eq(0)

有效并返回包装集中的 1 个元素： IMG#芙蓉

这本书的勘误表部分没有任何内容。 SO帖子的响应者解释说 “当您使用 [i] 之类的下标访问集合中的项目时，您实际上是从 jQuery 对象中解包它，并访问一个原始 DOM 节点，该节点没有 addClass 和 css 之类的方法”。

我是 jQuery 的新手，不理解这个错误，也不理解相关 SO 帖子中的解释。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

addClass 是一个 jQuery 方法。它只能在 jQuery 对象上调用。当您在 jQuery 对象上调用 [0] 或 .get(0) 时，您正在获取底层 DOM 元素。该对象不支持 jQuery 方法。

您应该在 jQuery 对象本身上调用 addClass：

img[alt].addClass('my-new-class');.

如果您只想为第一个带有alt 属性的图像添加一个类，您可以将jQuery 选择器更改为$('img[alt]:first')。

【讨论】：

【解决方案2】：

当您执行$('img') 之类的操作时，您会得到一个 jQuery 对象。此 jQuery 对象包含 0 个或多个 DOM 元素（在本例中为 img 元素）。 addClass 方法是一个 jQuery 对象的方法。它为对象中包含的每个元素分配一个类。

但是当您执行$('img')[0] 时，您正在尝试检索包含在 jQuery 对象中的第一个 DOM 节点（如果有）。此节点不是 jQuery 对象，因此您不能使用它从 jQuery 对象调用方法。你不得不做类似的事情

$('img').eq(0); //returns a new jQuery object with the element at position 0

或

$($('img')[0]);

这基本上是做同样事情的另一种方式（jQuery 可以从选择器、另一个 jQuery 对象或原生 DOM 元素构造。

【讨论】：