Суммируйте значения с помощью jQuery

Question

Суммируйте значения с помощью jQuery

0

У меня есть несколько динамически сгенерированных строк div, которые содержат div. Каждый из этих divs содержит значение внутри пользовательского контейнера. Структура выглядит примерно так:

<div class="mainDiv">
    <div class="block">
        <div data-a="2"></div>
        <div data-b="3"></div>
    </div>

    <div class="block">
        <div data-a="1"></div>
        <div data-b="3"></div>
    </div>

    <div class="block">
        <div data-a="5"></div>
        <div data-b="2"></div>
    </div>
</div>

<div class="mainDiv">
    <div class="block">
        <div data-a="2"></div>
        <div data-b="3"></div>
    </div>

    <div class="block">
        <div data-a="1"></div>
        <div data-b="3"></div>
    </div>

    <div class="block">
        <div data-a="5"></div>
        <div data-b="2"></div>
    </div>
</div>

Мне нужно рассчитать итоговые данные для данных-a и data-b в каждом.mainDiv

Я пробовал циклы, но я не уверен, правильно ли я получаю значения из атрибутов.

sumTotals = function(selector) {
      var sum = 0;
      $(selector).each(function() {
          sum += 1*($(this).text());
      });
      return sum;
}

$(".mainDiv").each(function(){
        var views = sumTotals($(this).attr("data-a"));
        var ptcps = sumTotals($(this).attr("data-b"));
        ...
});

Я думаю, что приближаюсь...

santa 07 март 2014, в 20:25

Источник

Теги:

jquery

3 ответа

0

Что-то вроде этого тоже работает, хотя, по общему признанию, я не разделял a. Я предположил, что вам нужна общая сумма. У других есть хорошие решения для разделения: ptcps и views

var ttlNum = 0;
var totals = jQuery('.mainDiv').find('div').map(function(){
     return jQuery(this).data('a') || jQuery(this).data('b');
}).each(function(i,v){
   ttlNum += v;
})

james emanon 07 март 2014, в 17:37

0

Все, что вы передаете в эту функцию, должно быть массивом элементов (или селектором, который создает массив элементов). .attr не возвращает массив, он возвращает значение атрибута для первого элемента в коллекции, так что все ваши передачи: Единственное значение.

Этот единственный элемент все еще не является правильным, потому что this .mainDiv, а не дополнительный элемент, который имеет атрибут data-a, это .mainDiv. Внутри каждого .mainDiv вам нужно найти все элементы, у которых есть атрибут, который вы используете, затем сопоставить их со значением этого атрибута и суммировать полученный набор значений:

$(".mainDiv").each(function(){
    var views = sumTotals($(this).find('div[data-a]').map(function () {
      return $(this).data('a');
    });

    var ptcps = sumTotals($(this).find('div[data-b]').map(function () {
      return $(this).data('b');
    });
});

... или просто суммируйте массивы на месте, что, вероятно, проще.

meagar 07 март 2014, в 16:19

0

В class="mainDiv" данных есть только один элемент с class="mainDiv" ... Возможно, вместо этого нужно class="mainDiv" class="block"
poncha 07 март 2014, в 18:37
0

@poncha Нет, прочитайте еще раз, есть несколько .mainDivs и вопрос четко гласит: «Мне нужно вычислить итоги для data-a и data-b в каждом .mainDiv».
meagar♦ 07 март 2014, в 18:37
0

О верно. моя вина ;)
poncha 07 март 2014, в 18:37

Показать ещё 1 комментарий

Ещё вопросы

В class="mainDiv" данных есть только один элемент с class="mainDiv" ... Возможно, вместо этого нужно class="mainDiv" class="block"
@poncha Нет, прочитайте еще раз, есть несколько .mainDivs и вопрос четко гласит: «Мне нужно вычислить итоги для data-a и data-b в каждом .mainDiv».

Karl-André Gagnon · Accepted Answer · 2014-03-07T17-33-00.000Z

Действительно, вы были близки, но вот посмотрите на этот код:

sumTotals = function(context, selector) {
    var sum = 0;
    $('[data-'+selector+']', context).each(function() {
        sum += 1*($(this).data(selector));
    });
    return sum;
}

$(".mainDiv").each(function(){
    var views = sumTotals(this, "a");
    var ptcps = sumTotals(this, "b");
    console.log(views, ptcps)
});

Вы видите, что в этом коде вы передаете контекст и data- *, которые хотите получить.

http://fiddle.jshell.net/5T8bs/