使用 jQuery 从元素列表创建特定属性的数组

Question

假设我有一些 div。

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

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

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 将按照出现在您的 DOM.

中的顺序存储所有包含 data-id 的 div

所以假设你想获得第二名 div 就这样做 array[1].attr('id')

使用 jQuery 从元素列表创建特定属性的数组

Create array of certain attribute from a list of elements using jQuery

javascript

jquery