Question

假设我有这个：

<div>
    <p id="bilingual_rate" data-item-rate="50">50 $</p>
    <p id="domain_rate" data-item-rate="50">50 $</p>
    <p id="hosting_rate" data-item-rate="250">250 $</p>
    <p id="ssl_rate" data-item-rate=""></p>
    <p id="gmaps_rate" data-item-rate=""></p>
    <p id="admin_rate" data-item-rate=""></p>
    <p id="ga_rate" data-item-rate=""></p>
    <p id="catalogue_rate" data-item-rate=""></p>
    <p id="online-store_rate" data-item-rate=""></p>
    <p id="blog_rate" data-item-rate=""></p>
    <p id="gallery_rate" data-item-rate=""></p>
    <p id="contact-form_rate" data-item-rate=""></p>
    <p id="newsletter_rate" data-item-rate=""></p>
</div>

如何循环进入此HTML以求和data-item-rate的值？

这是我尝试过的：

function updateTotal() {

  var total = 0;
  $('p[data-item-rate]').each(function() {
    total += $(this).data('item-rate');
  });

  alert(total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div>
  <p id="bilingual_rate" data-item-rate="50">50 $</p>
  <p id="domain_rate" data-item-rate="50">50 $</p>
  <p id="hosting_rate" data-item-rate="250">250 $</p>
  <p id="ssl_rate" data-item-rate=""></p>
  <p id="gmaps_rate" data-item-rate=""></p>
  <p id="admin_rate" data-item-rate=""></p>
  <p id="ga_rate" data-item-rate=""></p>
  <p id="catalogue_rate" data-item-rate=""></p>
  <p id="online-store_rate" data-item-rate=""></p>
  <p id="blog_rate" data-item-rate=""></p>
  <p id="gallery_rate" data-item-rate=""></p>
  <p id="contact-form_rate" data-item-rate=""></p>
  <p id="newsletter_rate" data-item-rate=""></p>
</div>

Answer 1

使用Array.prototype.reduce（专为这种工作而设计）的Vanilla JS一线式：

private func testSafeMutex() {
    let mutex = Mutex()

    dispatch {
        NSLog("1 locking")
        mutex.lock()
        NSLog("1 locked")
        defer {
            NSLog("1 unlocking")
            mutex.unlock()
            NSLog("1 unlocked")
        }

        sleep(1)
    }

    dispatch {
        NSLog("2 locking")
        mutex.lock()
        NSLog("2 locked")
        defer {
            NSLog("2 unlocking")
            mutex.unlock()
            NSLog("2 unlocked")
        }

        sleep(1)
    }
}

console.log([...document.querySelectorAll('[data-item-rate]')].reduce((a, v)=>a+Number(v.dataset.itemRate),0));

// if you insist on involving jQuery:
console.log([...$('[data-item-rate]')].reduce((a, v)=>a+Number(v.dataset.itemRate),0));

来自<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> 50 $ 50 $ 250 $ </div>的mdn文档：

reduce（）方法在数组的每个元素上执行一个reducer函数（由您提供），从而产生单个输出值。

减速器功能是这一部分：

reduce

它使用ES6箭头表示法。在ES5 Javascript中，以下内容将完全相同，只是不太简洁：

(a, v)=>a+Number(v.dataset.itemRate

Answer 2

我的最佳猜测是您尚未调用该函数。

updateTotal();

工作正常。 Demo

Answer 3

在类上调用每个类，将一个类添加到p元素。

function updateTotal() {

 var total = 0;
 $('.rate').each(function() {
 total += $(this).data('item-rate');
 });

}

jQuery的data属性的总和

3 个答案: