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

我想知道为什么我得到错误“$ groceryItems [i] .detach不是一个函数”，当我能够看到$ groceryItems [i]确实是一个DOM元素的记录结果？为什么.detach（）在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>

来源

2017-05-08 Eric

因为......它不是一个函数一个DOM节点。 –

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

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

所以，你可以简单的写：

$groceryItems.detach();

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

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

来源

2017-05-08 21:39:27 Barmar

为什么你用'each'来迭代一个集合？我一直很想知道这实际上。它不会让你立即访问jQuery包裹的元素，就像你期望的那样，参数的顺序不同于本地的'forEach'，它是愚蠢的，但是无论如何。我没有得到有用的东西。 – 1252748

@ 1252748对于早期的浏览器来说，这些浏览器可能不会实现标准的JavaScript循环结构（例如IE8没有'forEach'），所以它是一个有用的垫片。现在我只是为了保持一致性 - 如果我使用jQuery，我坚持使用它的方法。 – Barmar

$groceryItems是具有在其上定义的函数detach jQuery对象，但$groceryItems[i]是索引i在原始DOM元素。 DOM元素不具有称为detach的功能。

裹在一个jQuery对象中的元素调用detach前：

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

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

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

来源

2017-05-08 21:34:53

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

回答

相关问题