jQuery .first()方法返回集合而非首个元素，求排查错误

问题场景 #

使用jQuery的first()方法时遇到预期外的行为，代码如下：

$("button.overlay").on("click",function(e){
    e.stopPropagation();
    let i = $(e.target).closest('.style-display').children('.modal-info-container');
    let k = i[0];
    let j = i.first();
});

预期[0]和first()得到相同结果，但实际观察到first()返回的似乎是未改变的集合，疑问操作哪里出错。

核心差异说明 #

两者的本质返回类型完全不同：

• i[0]：直接从jQuery集合中提取第一个原生DOM元素，返回值是单个DOM节点对象（比如对应<div class="modal-info-container">的原生对象）。
• i.first()：返回一个新的jQuery集合实例，这个集合仅包含原集合的第一个元素，它仍然是jQuery对象，而非原生DOM元素。

为什么看起来"未改变" #

你觉得first()返回未改变的集合，大概率是调试时查看jQuery对象的结构导致的——jQuery对象会保留集合的相关属性，但实际上j的长度已经是1（可以通过console.log(j.length)验证），它和原集合i是完全独立的两个实例，原集合i的元素数量不会被修改。

验证方法 #

在代码中加入日志即可明确差异：

console.log(typeof k); // 输出 "object"（原生DOM元素类型）
console.log(k.nodeName); // 输出对应DOM节点的标签名，比如 "DIV"
console.log(j.length); // 输出 1，说明是仅含第一个元素的jQuery集合
console.log(j[0] === k); // 输出 true，证明两者指向同一个原生DOM元素

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