Question

这是我遇到的一个jQuery问题，并且总是要使用我并不自豪的方法来解决。

我正在尝试存储一系列元素供以后评估。问题是每次我尝试访问并应用任何函数时，错误控制台都会报告它不是函数。我确信我对jQuery的工作方式有误解。尽管如此，我还是想指出正确的方向。这是我正在使用的代码：

var products = $('ul.products');
var productLists = []
$.each(products, function (i) {
    productLists[i] = products[i].children('li');
    console.log(productLists[i]);
});

这是我得到的错误：

Uncaught TypeError: Property 'children' of object #<HTMLUListElement> is not a function

Answer 1

您正在尝试从HTMLElement调用jQuery方法。尝试在新的jQuery对象中包装元素引用：

productLists[i] = $(products[i]).children('li');

在$.each内，您可以使用关键字this来引用当前正在处理的项目。因此，您可以轻松地说products[i]：

，而不是致电this

$.each( products, function() {
  productsList.push( $(this).children("li") );
});

另请注意，当您进行选择时，jQuery已经存储了对元素的引用集合：

var productList = $("ul.products li"); // All list items in ul.products

然后您可以按照自己的意愿操作所有这些。如果您需要自己的副本，以确保以后在您想要篡改它们时存在，可以使用.clone：

var productList = $("ul.products li").clone();

Answer 2

您可以直接在jquery集合对象上使用每个方法。因此，做同样事情的另一种方式可能是：

$('ul.products').each(function(){
  productsList.push( $(this).children("li") );
})

虽然选择很重要，但在处理jQuery集合时我总是更喜欢这种方法。

在变量中存储HTML元素的集合以供以后使用

2 个答案: