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

时间:2015-08-27 14:02:34

标签: javascript jquery custom-data-attribute

这是我的问题:

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

如何实现这一目标?

2 个答案:

答案 0 :(得分:0)

您可以使用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

答案 1 :(得分:0)

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