Question

说我有一些div。

<div data-id="1"></div>
<div data-id="2"></div>
<div data-id="3"></div>
<div data-id="4"></div>

有没有办法在不使用data-id的情况下获取["1", "2", "3", "4"]属性数组：.each？

Answer 1

您可以使用.map()：(example here)

var array = $('div[data-id]').map(function(){
    return $(this).data('id');
}).get();

console.log(array);

或者，使用纯JS：(example here)

var elements = document.querySelectorAll('div[data-id]'),
    array = [];

Array.prototype.forEach.call(elements, function(el){
    array.push(parseInt(el.dataset.id, 10));
});

console.log(array);

...或使用常规for循环：(example here)

var elements = document.querySelectorAll('div[data-id]'),
    array = [],
    i;

for (i = 0; i < elements.length; i += 1) {
    array.push(parseInt(elements[i].dataset.id, 10));
}

console.log(array);

Answer 2

如果您正在寻找更原始的解决方案，您可以使用for循环并在没有JQuery的情况下执行此操作，例如：

var nodes = document.querySelectorAll('[data-id]');
for(var i=0;i<nodes.length;i++){
   // do something here with nodes[i]
}

或者直接从查询结果中获取数组，您也可以使用Array.prototype.map.call：

var values = Array.prototype.map.call(nodes, function(e){ return e.dataset.id; });

Answer 3

var array=$('div[data-id]');//array会将包含data-id的所有div存储在DOM中显示的顺序中。

所以假设你想得到第二个div就像这样array[1].attr('id')

使用jQuery从元素列表创建某个属性的数组

3 个答案: