使用jquery循环遍历列表项

Question

我有这段代码

listItems = $("#productList").find("li");

        for (var li in listItems) {
            var product = $(li);
            var productid = product.children(".productId").val();
            var productPrice = product.find(".productPrice").val();
            var productMSRP = product.find(".productMSRP").val();

            totalItemsHidden.val(parseInt(totalItemsHidden.val(), 10) + 1);
            subtotalHidden.val(parseFloat(subtotalHidden.val()) + parseFloat(productMSRP));
            savingsHidden.val(parseFloat(savingsHidden.val()) + parseFloat(productMSRP - productPrice));
            totalHidden.val(parseFloat(totalHidden.val()) + parseFloat(productPrice));

        }

而且我没有得到预期的结果 - totalItems的出现是180+,其余的都是NaN.我怀疑它在哪里使用var product = $(li);或者可能与循环本身的表达式有关.无论哪种方式 - 我需要循环标记的<li>项目<ul>#productList

Answer 1

你需要使用.each:

var listItems = $("#productList li");
listItems.each(function(idx, li) {
    var product = $(li);

    // and the rest of your code
});

这是循环jQuery选择的正确方法.

在现代Javascript中,您还可以使用for .. of循环:

var listItems = $("#productList li");
for (let li of listItems) {
    let product = $(li);
}

但请注意,较旧的浏览器不支持此语法,并且使用上面的jQuery语法可能会更好.

Answer 2

你可以使用each这个:

$('#productList li').each(function(i, li) {
  var $product = $(li);  
  // your code goes here
});

话虽这么说 - 你确定你想要每次更新值为+1吗？难道你不能找到计数然后根据它设置值？

Answer 3

尝试这个：

listItems = $("#productList").find("li").each(function(){
   var product = $(this);
   // rest of code.
});