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>

最佳答案

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

但是您不需要编写循环来分离jQuery对象中的所有元素。当您将jQuery修改功能应用于集合时，它将自动对所有元素执行它。

所以你可以简单地写：

$groceryItems.detach();

当您要遍历集合中的元素时，请使用.each()：

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