如何通过指定索引访问jQuery对象数组中的对象？

1. 为什么会出现这种情况？ #

你用let items = $(".item");得到的是一个jQuery包装对象，它本质是类数组结构，内部存的是匹配到的原生DOM元素。当你用items[1]这种索引方式访问时，拿到的是原生DOM元素节点，而非jQuery对象。浏览器控制台在输出DOM元素时，默认会展示它的HTML结构，而非对象的属性和方法，所以你看到的是<span class="item">02</span>这类输出。

简单总结：$(".item")返回的是jQuery集合，items[1]取出的是集合里的原生DOM元素，控制台对DOM元素的默认展示逻辑就是输出它的HTML代码。

2. 如何通过指定索引访问数组中的对象？ #

有两种常用方法可以拿到对应索引的jQuery对象：

• 使用jQuery的.eq()方法：这个方法会返回对应索引位置的jQuery包装对象，示例：

  let itemObj = items.eq(1);
  console.log(itemObj); // 此时输出的是jQuery对象
  

• 把原生DOM元素重新包装成jQuery对象：如果已经用索引取出了原生DOM，也可以再用$()包裹它，示例：

  let domElement = items[1];
  let itemObj = $(domElement);
  console.log(itemObj); // 同样得到jQuery对象
  

这两种方式都能让你继续使用jQuery的各类方法（比如.text()、.css()），而非只能操作原生DOM的属性。

内容的提问来源于stack exchange，提问作者xocotivozi