javascript-使用jquery遍历列表项

我有这段代码

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);的地方,或者可能与循环本身上的表达式一起使用。 无论哪种方式-我都需要遍历标记为#productList<ul>中的<li>项目

Gallen asked 2020-02-13T01:01:13Z
6个解决方案
118 votes

您需要使用for .. of

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语法可能会更好。

lonesomeday answered 2020-02-13T01:01:39Z
15 votes

您可以为此使用each

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

话虽这么说-您确定要每次将值更新为+1吗? 您难道不便找到计数,然后根据该值设置值吗?

girasquid answered 2020-02-13T01:02:04Z
4 votes

尝试这个:

listItems = $("#productList").find("li").each(function(){
   var product = $(this);
   // rest of code.
});
rcravens answered 2020-02-13T01:02:24Z
2 votes

试试这个代码。 通过使用parent> child选择器“ #productList li”,它应该找到所有li元素。 然后,您可以使用each()方法遍历结果对象,这只会更改已找到的li元素。

listItems = $("#productList li").each(function(){

        var product = $(this);
        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));

    });
exoboy answered 2020-02-13T01:02:44Z
2 votes

要获得更明确的答案,您需要发布一些标记。 您可以相当简化jQuery,如下所示:

$("#productList li").each(function() {
    var product = $(this);
    var productid = $(".productId", product).val();
    var productPrice = $(".productPrice", product).val();
    var productMSRP = $(".productMSRP", product).val();

    // the rest remains unchanged
}
wsanville answered 2020-02-13T01:03:04Z
0 votes

要在没有jQuery .each()的情况下解决此问题,您必须像这样修复代码:

var listItems = $("#productList").find("li");
var ind, len, product;

for ( ind = 0, len = listItems.length; ind < len; ind++ ) {
    product = $(listItems[ind]);

    // ...
}

您原始代码中的错误:

  1. .each()也将遍历所有继承的属性; 即您还将获得jQuery定义的所有函数的列表。

  2. 循环变量.each()不是列表项,而是列表项的索引。 在那种情况下,索引是普通数组索引(即整数)

基本上,您可以省去使用.each(),因为它更舒适,但是特别是当您循环更大的数组时,此答案中的代码将更快。

对于.each()的其他替代产品,您可以查看以下性能比较:[http://jsperf.com/browser-diet-jquery-each-vs-for-loop]

Philipp answered 2020-02-13T01:03:46Z
translate from https://stackoverflow.com:/questions/4511652/looping-through-list-items-with-jquery