Question

我有几个包含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>

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

我需要计算每个.mainDiv

中data-a和data-b的总数

我尝试过循环，但我不确定我是否正确地从属性中获取值。

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"));
        ...
});

我想我已经接近了......

Answer 1

确实你很亲密，但是这里看一下这段代码：

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

你会看到，在这段代码中，你传递了你想要获得的上下文和数据。

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

Answer 2

无论你传入该函数的是什么，都必须是一个项目数组（或一个产生项目数组的选择器）。 .attr不返回数组，它返回集合中 first 元素的属性值，这样就可以传入所有内容：单个值。

但是单个项目仍然不正确，因为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');
    });
});

... 或只是对数组进行求和，这可能更容易。

Answer 3

这样的事情也有效 - 尽管如此，我没有分开a | b。我以为你想要一个总计。其他人有很好的分离解决方案：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;
})

使用jQuery求和值

3 个答案: