用jquery循环遍历列表项

I have this block of code

我有这段代码

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

        }

and I'm not getting the desired results - totalItems is coming out as 180+ and the rest all NaN. I suspect its where i use var product = $(li); or perhaps with the expression on the loop itself. Either way - I need to loop through the <li> items in the <ul> labelled #productList

我没有得到想要的结果- total项是180+，其余都是NaN。我怀疑它是我使用var product = $(li)的地方;或者可能与循环本身的表达式有关。无论哪种方式——我都需要循环遍历

6 个解决方案

#1

100

You need to use .each:

你需要使用。

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

    // and the rest of your code
});

This is the correct way to loop through a jQuery selection.

这是循环遍历jQuery选择的正确方法。

In modern Javascript you can also use a for .. of loop:

在现代Javascript中，你也可以使用for ..循环:

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

Be aware, however, that older browsers will not support this syntax, and you may well be better off with the jQuery syntax above.

但是要注意，旧的浏览器不支持这种语法，您最好使用上面提到的jQuery语法。

#2

You can use each for this:

你可以使用每一个这样:

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

That being said - are you sure you want to be updating the values to be +1 each time? Couldn't you just find the count and then set the values based on that?

也就是说，你确定要每次都更新值为+1吗?难道你不能找到计数然后根据它设置值吗?

#3

Try this:

试试这个:

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

#4

Try this code. By using the parent>child selector "#productList li" it should find all li elements. Then, you can iterate through the result object using the each() method which will only alter li elements that have been found.

试试这个代码。通过使用parent>子选择器“#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));

    });

#5

For a more definitive answer, you'll need to post some of your markup. You can simplify your jQuery quite a bit, like the following:

要获得更明确的答案，您需要发布一些标记。您可以简化您的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
}

#6

To solve this without jQuery .each() you'd have to fix your code like this:

要解决这个问题，不需要jQuery。

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

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

    // ...
}

Bugs in your original code:

原始代码中的错误:

for ... in will also loop through all inherited properties; i.e. you will also get a list of all functions that are defined by jQuery.

为…in还循环遍历所有继承的属性;例如，您还将获得jQuery定义的所有函数的列表。
The loop variable li is not the list item, but the index to the list item. In that case the index is a normal array index (i.e. an integer)

循环变量li不是列表项，而是列表项的索引。在这种情况下，索引是一个普通数组索引(即一个整数)

Basically you are save to use .each() as it is more comfortable, but espacially when you are looping bigger arrays the code in this answer will be much faster.

基本上，您可以保存为使用.each()，因为它更舒适，但是当您使用更大的数组时，这个答案的代码将会更快。

For other alternatives to .each() you can check out this performance comparison: http://jsperf.com/browser-diet-jquery-each-vs-for-loop

对于.each()之外的其他替代方法，您可以查看以下性能比较:http://jsperf.com/browser-diet-jquery-each- vsfor循环

#1

100