Получить HTML несколько дивы с Jquery

Question

У меня есть несколько дивов отформатированных как следующий

<div class="slot_totals">8.00 hrs</div> 

И я хочу, чтобы получить значение от этого и добавить их, но я не могу заставить его работать по какой-то причине , Это мой код до сих пор:

function refreshTotals() { 
    var $totalHours = 0.00; 
    for (var $i=0; $i<$('.slot_totals').length; $i++) { 
     var $slotTotal = $('.slot_totals').html().split(" "); 
     $slotTotal = Number($slotTotal[0]); 
     $totalHours += $slotTotal; 
    } 
    // $('').html($totalHours.toFixed(2)+' hrs'); 
    console.log($totalHours.toFixed(2)+' hrs'); 
} 

Он действительно вычисляет штраф, но это только первое значение снова и снова. Я думаю, что это связано с массивом, но не уверен, как выбрать каждый элемент.

Может ли кто-нибудь увидеть, что я делаю неправильно? И как мне это исправить?

Answer 1

Вы можете использовать .each() перебрать вашего .slot_totals. Я думаю, что parseFloat() должно быть достаточно для анализа значений.

$(function() { 
    var sum = 0; 
    $('.slot_totals').each(function (index, slot) { 
     sum += parseFloat(slot.innerHTML); 
    }); 
    alert(sum); 
}); 

http://jsfiddle.net/kta7y5cy/

Answer 2

$('.slot_totals').html() всегда будет возвращать html первого элемента в коллекции, представленной селектором. Это в основном касается почти всех jQuery getters, так как только одно значение может быть возвращено

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

var $slotTotal = $('.slot_totals').eq($i).html().split(" "); 

Ссылка: eq() Docs

Answer 3

Вы должны фактически выбрать .slot_totals элемент вы работаете на в каждом цикле. Измените эту строку:

var $slotTotal = $('.slot_totals').html().split(" "); 

к этому:

var $slotTotal = $('.slot_totals').eq($i).html().split(" "); 

---

Ваш код может быть более выразительным и более удобным для чтения, если вы использовали .each функцию JQuery вместо:

function refreshTotals() { 
    var $totalHours = 0.00; 
    $('.slot_totals').each(function() { 
     var $slotTotal = $(this).html().split(" "); 
     $slotTotal = Number($slotTotal[0]); 
     $totalHours += $slotTotal; 
    }); 
    console.log($totalHours.toFixed(2)+' hrs'); 
} 

Answer 4

Вот работа fiddle

Обновленный код:

function refreshTotals() { 
    var $totalHours = 0.00; 
    for (var $i=0; $i<$('.slot_totals').length; $i++) { 
     var $slotTotal = $('.slot_totals:eq('+$i+')').html().split(" "); 
     $slotTotal = Number($slotTotal[0]); 
     $totalHours += $slotTotal; 
    } 
    // $('').html($totalHours.toFixed(2)+' hrs'); 
    console.log($totalHours.toFixed(2)+' hrs'); 
} 

Answer 5

Попробуйте Jquery .each код

$(function() { 
    var total = 0; 
    $('.slot_totals').each(function (index, value) { 
     var thisSlotTotal = $(value).html().split(" "); 
     thisSlotHours = Number(thisSlotTotal[0]); 
     console.log(thisSlotHours.toFixed(2) + ' hrs'); 
     total += thisSlotHours; 
    }); 
    alert(total); 
}); 

DEMO: JSFIDDLE

Answer 6

Простейшее способ преобразовать коллекцию Jquery к подлинному массив с .get(), а затем использовать .reduce() для сканировать массив и m ake общее количество.

Кроме того, используйте parseInt() (или parseFloat()), чтобы преобразовать числовую часть каждой строки в число.

function refreshTotals() { 
    var total = $('.slot_totals').get().reduce(function(total, el) { 
     return total + parseInt($(el).html());//or parseFloat() 
    }, 0); 
    console.log($totalHours.toFixed(2)+' hrs'); 
}