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

Question

I have 16 divs with the class "box" and each "box" has a different name.

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

I want to select these individual names, so I attempted to use the following code:

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

But my console shows that "$(...)[i].attr is not a function".

When I tried this:

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

I get back 16 lines of "box1", which is only the name for the first "box" div.

What I want instead is "box1, box2, box3, box4, box5..."

What can I do?

Answer 1

Does it have to be jQuery? If not, this could work:

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

Answer 2

Using jQuery:

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

Answer 3

You can do it using jQuery eq

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

or using fully jQuery version

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

Answer 4

Please note that name is not a supported attribute on div elements, hence making your HTML invalid . Use data-name instead. Once you changed that, that also makes the code easier:

$(".box")[i]

gives you the native DOM element in the jQuery collection, which does not have any jQuery methods like attr() . It does, tho, have the native DOMElement dataset API, so you can simply go with

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

or, even simpler

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

If you insist on using jQuery and also on using an index-based for -loop (which I haven't used in years now), go with jQuery's eq(index) function:

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

As with almost everything, jQuery is just unnecessary bloat you don't need any longer in 2020. Here's the modern way to achieve your goal:

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