Question

我想知道为什么我收到错误“$ groceryItems [i] .detach不是函数”当我能够看到$ groceryItems [i]确实是一个DOM元素，因为它记录了它？

我只包含了脚本，而不是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>

Answer 1

@ibrahim mahir的回答解释了为什么你的代码无法正常工作。

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

所以你可以写一下：

$groceryItems.detach();

当您想要循环集合中的元素时，请使用.each()：

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

Answer 2

$groceryItems是一个jQuery对象，其上定义了函数detach，但$groceryItems[i]是索引i处的原始DOM元素。 DOM元素没有名为detach的函数。

在调用detach之前将元素包装在jQuery对象中：

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

或者使用eq代替[]（eq将返回一个定义了detach的jQuery对象：

$groceryItems.eq(i).detach();
//           ^^^^^^

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

2 个答案: