Question

168

Looping through list items with jQuery

rated 0 times [ 175] [ 7] / answers: 1 / hits: 175382 / 14 Years ago, wed, december 22, 2010, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kinsley

Add To Favorites

Follow

Total Points: 352

Total Questions: 84

Total Answers: 94

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

kinsley questions

1 Module not found: Can't resolve '@material-ui/lab/TabContext' in '/home/sanika/Desktop/Coding/React/my-forms/src/Components'

Sat, Aug 21, 21, 00:00, 3 Years ago

1 TypeError [ERR_HTTP_INVALID_HEADER_VALUE] for Algolia with Firebase

Mon, Jul 20, 20, 00:00, 4 Years ago

1 ReactJS: propTypes validation for array of objects

Mon, Nov 25, 19, 00:00, 5 Years ago

1 styled-components: extend styles and change element type

Sat, Apr 20, 19, 00:00, 5 Years ago

1 Changing the display of an element via Javascript?

Wed, Feb 20, 19, 00:00, 5 Years ago

View All

answered 14 Years ago kirstendevanb · Accepted Answer

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.

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

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.