javascript - 如何使用 Javascript 在 HTML 的属性列表中分离和收集不同的值？

Question

我有下一个列表:

<ul>
    <li class="list" data="Paul"  data-id="2">Paul</li>
    <li class="list" data="Paul"  data-id="4">Paul</li>
    <li class="list" data="Peter" data-id="3">Peter</li>
    <li class="list" data="Peter" data-id="1">Peter</li>
    <li class="list" data="John"  data-id="11">John</li>
    <li class="list" data="John"  data-id="12">John</li>
</ul>

所以，目标是得到:

Paul: 6 | Peter: 4 | John: 23

我正在尝试在 jquery 中使用 .map，例如:

    $(function() {
        var total = 0;
        var counter = $('li.list').length;
        $('#resp').html(counter);

        var dataList = $("li.list").map(function() {
            var data = $(this).attr('data')             
            return data+$(this).data("id");
        }).get();

        mydata = dataList.join(";");
        alert(mydata)
    });

这是返回:

Paul2;Paul4;Peter3;Peter1;John11;John12

如何为 get 的 separte 排序和求和:

Paul: 6 | Peter: 4 | John: 23

谢谢。

Answer 1

您可以使用 Array.from() 创建 Array 并使用 reduce 并返回 Object

var result = Array.from($('ul li')).reduce((obj, e) => {
  obj[$(e).data('name')] = (obj[$(e).data('name')] || 0) + parseInt($(e).data('id'));
  return obj;
}, {})

console.log(result)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="list" data-name="Paul" data-id="2">Paul</li>
  <li class="list" data-name="Paul" data-id="4">Paul</li>
  <li class="list" data-name="Peter" data-id="3">Peter</li>
  <li class="list" data-name="Peter" data-id="1">Peter</li>
  <li class="list" data-name="John" data-id="11">John</li>
  <li class="list" data-name="John" data-id="12">John</li>
</ul>