Question

这是我的问题：

HTML结构如下：

<div class="a-pin" data-alpha=2>City One</div>
<div class="a-pin" data-alpha=3 data-beta=1>City Two</div>
<div class="a-pin" data-beta=2 data-gamma=8>City Three</div>

可以有任意数量的divs具有不同但相似的data属性。不知何故，在jQuery的帮助下，我需要检查所选data-和div（！）的return属性EACH data-属性的列表及其在弹出窗口中的值应该是这样的（对于示例中的第二个div）：

项目总数：
阿尔法的东西：3
Beta内容：1

不要担心弹出窗口，它已经在代码中，应该像这样：

popupText.html( 'Total projects: <br>' + the-list-that-I-need );

如何实现这一目标？

Answer 1

您可以使用data检索元素上的所有data()属性来实现此目的。然后，您可以循环遍历这些以生成所需的HTML。试试这个：

$('.a-pin').click(function() {
    var data = $(this).data();
    var output = '';
    for (var key in data)
        output += key + ': ' + data[key] + '<br />';
    $('#output span').html(output);
});

Example fiddle

Answer 2

Vanilla版本，也许它很有用。

var nodes = Array.prototype.slice.call(document.querySelectorAll('.a-pin')),
    gatherAttributes = function ( node ) {
        return Array.prototype.slice.call(node.attributes).reduce(function ( acc, att ) {
            var name = att.name;
            if (/data.+/.test(name)) acc[name] = node.getAttribute(name);
            return acc;
        }, {});
    };
nodes.forEach(function ( node ) {
    var result = gatherAttributes(node);
    console.log(JSON.stringify(result));
});

检查多个div的数据属性，并仅将那些存在的数据返回到单独的列表中

2 个答案: