Пересечение элементов списка с помощью 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); или, возможно, с выражением в самом цикле. В любом случае - мне нужно пройти через элементы <li> в <ul> с меткой #productList

Ответ 1

Вам нужно использовать .each:

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

    // and the rest of your code
});

Это правильный способ циклического выбора jQuery.

Ответ 2

Вы можете использовать each для этого:

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

Как говорится - вы уверены, что хотите обновлять значения, составляющие +1 каждый раз? Не могли бы вы просто найти счетчик, а затем установить значения на основе этого?

Ответ 3

Попробуйте следующее:

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

Ответ 4

Для получения более точного ответа вам нужно будет опубликовать часть вашей разметки. Вы можете немного упростить 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
}

Ответ 5

Попробуйте этот код. Используя родительский > дочерний селектор "#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));

    });

Ответ 6

Чтобы решить эту проблему без jQuery .each(), вам нужно будет исправить свой код следующим образом:

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

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

    // ...
}

Ошибки в исходном коде:

for ... in также будет проходить через все унаследованные свойства; то есть вы также получите список всех функций, которые определены jQuery.
Переменная цикла li не является элементом списка, а индексом для элемента списка. В этом случае индекс является индексом нормального массива (т.е. Целочисленным)

В основном вы сохраняете, чтобы использовать .each(), поскольку это более удобно, но espacially, когда вы зацикливаете большие массивы, код в этом ответе будет намного быстрее.

Для других альтернатив .each() вы можете проверить это сравнение производительности: http://jsperf.com/browser-diet-jquery-each-vs-for-loop