这是我的问题:
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 );
如何实现这一目标?
答案 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);
});
答案 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));
});