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

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();