jQuery .click(): get attribute from DIVs with the same class

Question

I have a problem with click event; here's the code:

jQuery:

$(document).ready(function() {
    $('.myClass').click(function() {
        alert($(.myClass).attr("iditem"));
    });
});

HTML:

<div class="myClass" iditem="1">
    1 
</div>
<div class="myClass" iditem="2">
    2
</div>

Two DIV with same class, but different values for the same attribute, when I click on a DIV, alert print always "1" (it seems ignoring the declaration of second DIV). Why .attr() doesn't take the right value for the second DIV?

missing quotes, else use a "this"

footy
– footy

2012-02-28 12:04:27 +00:00
Commented Feb 28, 2012 at 12:04 — footy
– footy, Commented Feb 28, 2012 at 12:04

Felix Kling · Accepted Answer · 2012-02-28 12:08:46Z

12

Assuming you have $('.myClass').attr("iditem"), this will always return the attribute of the first element in the set, as described in the documentation ^{[docs] þ}:

Get the value of an attribute for the first element in the set of matched elements.

So instead of selecting all elements with class myClass (that's what $('.myClass') does, no matter where/when it is called), you want to get a reference to the clicked element. Simply do:

$(this).attr('iditem');

this always refers to the element the event handler was bound to.

I suggest to use HTML5 data-* attributes instead of custom attributes, to have at least valid HTML5:

 <div class="myClass" data-item="1">

You can then use .data() ^[docs] to retrieve the value.

þ: You really should read jQuery's documentation. It provides many examples and a detailed description of how each method works. Make sure you also understand how selectors ^[docs] work.

edited Feb 28, 2012 at 12:08

answered Feb 28, 2012 at 12:03

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Willem Mulder · Accepted Answer · 2012-02-28 12:03:44Z

1

I assume you want to show the itemid of the item you click on? Then, this works:

$('.myClass').click(function() {
    alert($(this).attr("iditem"));
})

answered Feb 28, 2012 at 12:03

Willem Mulder

14.1k4 gold badges42 silver badges64 bronze badges

Comments

Beetroot-Beetroot · Accepted Answer · 2012-02-28 12:02:25Z

0

alert($(".myClass").attr("iditem"));

answered Feb 28, 2012 at 12:02

Beetroot-Beetroot

18.1k3 gold badges39 silver badges44 bronze badges

Comments

Klaus Byskov Pedersen · Accepted Answer · 2012-02-28 12:04:52Z

0

$(".myClass") returns all elements with the class myClass. I think you want something like this instead:

    $(document).ready(function()
    {
        $('.myClass').click(function() {
            alert($(this).attr("iditem"));
        });
    });

answered Feb 28, 2012 at 12:04

Klaus Byskov Pedersen

122k31 gold badges192 silver badges223 bronze badges

Collectives™ on Stack Overflow

jQuery .click(): get attribute from DIVs with the same class

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related