如何在jquery中从div列表中选择属性

Question

我有16个div与类"；框"；并且每个"；框"；有一个不同的名称。

The first "box" has name="box1";
the second "box" has name="box2";
the third "box" has name="box3";
and so on.....

我想选择这些单独的名字，所以我尝试使用以下代码：

for (var i = 0; i < $(".box").length; i++) {
console.log($(".box")[i].attr("name"));
}

但我的控制台显示$(…([i].attr不是函数"；。

当我尝试这个：

for (var i = 0; i < $(".box").length; i++) {
console.log($(".box").attr("name"));
}

我得到16行"；box1"；，这只是第一个"；框"；分区

相反，我想要的是"；盒子1、盒子2、盒子3、盒子4、盒子5……"；

我能做什么？

Answer 1

使用jQuery:

$( ".box" ).each(function( index ) {
console.log($(this).attr("name") );
});

Answer 2

它必须是jQuery吗？如果没有，这可能会起作用：

[...document.querySelectorAll('.box')]
.map(d => d.getAttribute('name'))
.forEach(name => console.log(name))

Answer 3

您可以使用jQueryeq

for (var i = 0; i < $(".box").length; i++) {
console.log($(".box").eq(i).attr("name"));
}

或使用完整的jQuery版本

$('.box').each(function(){
console.log($(this).attr('name'));
})

Answer 4

请注意，name不是div元素上支持的属性，因此您的HTML无效。请改用data-name。一旦你改变了这一点，这也会让代码变得更容易：

$(".box")[i]

为您提供了jQuery集合中的本机DOM元素，该集合没有任何像attr()这样的jQuery方法。不过，它有原生的DOMElementdatasetAPI，所以您可以直接使用

$(".box")[i].getAttribute('data-name')

或者，更简单的

$(".box")[i].dataset.name

如果您坚持使用jQuery，并且还坚持使用基于索引的for-循环(我已经好几年没有使用过了(，请使用jQuery的eq(index)函数：

$(".box").eq(i).data("name")

和几乎所有东西一样，jQuery只是不必要的膨胀，在2020年你不再需要了。以下是实现目标的现代方法：

document.querySelectorAll('.box')
.forEach(el => console.log(el.dataset.name);