Javascript 为什么.detach（）在DOM元素数组中抛出错误？

我想知道，当我能够看到$groceryItems[I]确实是一个DOM元素时，为什么会出现错误“$groceryItems[I]。detach不是一个函数”

我只包含了脚本，没有包含ejs视图

<script>
function sortByAvgRating() {

var $groceryItems = $('.groceryItems');//grab all of the grocery items

for (var i = $groceryItems.length; i--; ) {//detach each grocery item from the DOM
    console.log('$groceryItems[i] ', $groceryItems[i]);
    $groceryItems[i].detach();
}

$groceryItems.sort(function(a, b) {//sort the grocery items by the rating attribute
    return +a.children[1].children[0].children[0].dataset.rating - 
        +b.children[1].children[0].children[0].dataset.rating;
}).
appendTo('groceryItemsContainer');//apppend the sorted array of elements to the DOM
}

</script>

函数sortByAvgRating（）{
var$groceryItems=$（'.groceryItems'）；//抓取所有杂货项目
对于（var i=$groceryItems.length；i--；）{//从DOM中分离每个杂货项目
log（“$groceryItems[i]”，$groceryItems[i]）；
$groceryItems[i].detach（）；
}
$groceryItems.sort（函数（a，b）{//根据rating属性对杂货项目进行排序
return+a.children[1]。children[0]。children[0]。dataset.rating-
+b、 子项[1]。子项[0]。子项[0]。dataset.rating；
}).
appendTo（'groceryItemsContainer'）；//将已排序的元素数组应用到DOM
}

$groceryItems

是一个jQuery对象，其上定义了函数

detach

，但

$groceryItems[i]

是索引

i

处的原始DOM元素。DOM元素没有名为

detach

的函数

在调用

detach

之前，将元素包装到jQuery对象中：

$( $groceryItems[i] ).detach();

$groceryItems.each(function() {
    console.log(this);
    $(this).detach();
});

或者使用而不是

[]

（

eq

将返回定义了

detach

的jQuery对象）：

---

@ibrahim mahir的回答解释了为什么代码不起作用

但是不需要编写循环来分离jQuery对象中的所有元素。将jQuery修改函数应用于集合时，它会自动在所有元素上执行该操作

所以你可以简单地写：

$groceryItems.detach();

如果要循环集合中的元素，请使用

。each（）

：

---

因为。。。它不是dom节点的函数。为什么要使用

each

来迭代集合？事实上，我一直有点奇怪。它不会像您所期望的那样立即访问jQuery包装的元素，参数的顺序不同于native

forEach

，后者很愚蠢，但无论如何。我不知道它有什么用处。@1252748它可能对早期的浏览器更有用，因为早期的浏览器并不都实现标准的Javascript循环结构（例如IE8没有

forEach

），所以它是一个有用的垫片。现在我只是为了一致性而这样做——如果我使用jQuery，我会坚持使用它的方法。

$groceryItems.each(function() {
    console.log(this);
    $(this).detach();
});