CODEWITHSUNDEEP
jquerythisattr
natejones
natejones

Reputation: 61

Get jQuery attributes for each, not just the first

I need to get the datahours, etc. for the specific clicked link within a long list. What am I missing?

HTML:

<ul>
<li><a href="#" class="item" title="Gallery" datakey="1" datatitle="A+D Gallery" dataaddress="123 Main St" datahours="10:00, 10:30, 11:00, 11:30, 1:00">Gallery</a></li>
<li><a href="#" class="item" title="Radio" datakey="2" datatitle="Radio" dataaddy="321 Center Dr" datahours="11:00, 11:30, 12:00, 12:30, 1:00, 1:30, 2:00, 2:30">Radio</a></li></ul>

JS:

    $(function() {
    var datakey = $(".item").attr("datakey");   
    var datatitle = $(".item").attr("datatitle");
    var dataaddress = $(".item").attr("dataaddress");
    var datahours = $(".item").attr("datahours");

    $(this).click(function(){

        // CONSOLE
        console.log(datakey);

    });

}) // DOM Ready

Upvotes: 0

Views: 145

Answers (8)

Matt Ball
Matt Ball

Reputation: 359826

How about we do this the jQuery way.

HTML

<ul id="items">
    <li><a href="#" class="item" title="Gallery" data-key="1" data-title="A+D Gallery" data-address="123 Main St" data-hours="10:00, 10:30, 11:00, 11:30, 1:00">Gallery</a></li>
    <li><a href="#" class="item" title="Radio" data-key="2" data-title="Radio" data-address="321 Center Dr" data-hours="11:00, 11:30, 12:00, 12:30, 1:00, 1:30, 2:00, 2:30">Radio</a></li>
</ul>

JavaScript

$(function()
{
    $('#items').on('click', 'a.item', function ()
    {
        console.log($(this).data('key'));
        return false;
    });
});

Demo http://jsfiddle.net/mattball/XBrfH/

Upvotes: 5

enloz
enloz

Reputation: 5824

Try this

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    var datakey = $(".item").attr("datakey");   
    var datatitle = $(".item").attr("datatitle");
    var dataaddress = $(".item").attr("dataaddress");
    var datahours = $(".item").attr("datahours");

    $(".item").click(function(){

        // CONSOLE
        console.log(datakey);

    });
})
</script>

<li><a href="#" class="item" title="Gallery" datakey="1" datatitle="A+D Gallery" dataaddress="123 Main St" datahours="10:00, 10:30, 11:00, 11:30, 1:00">Gallery</a></li>
<li><a href="#" class="item" title="Radio" datakey="2" datatitle="Radio" dataaddy="321 Center Dr" datahours="11:00, 11:30, 12:00, 12:30, 1:00, 1:30, 2:00, 2:30">Radio</a></li></ul>

Upvotes: 0

arb
arb

Reputation: 7863

A couple things.

  1. You should attach the click event directly to the a tag. Your line $(this).click() is probably attaching to the entire document. $('a.item').click() This way this will refer to the link that has been clicked.

  2. You should list your data attribute like data-title and data-key. This way, you can use the $.data() of jQuery so you can do $(this).data().key

Upvotes: 0

JaredPar
JaredPar

Reputation: 754745

When requesting an attribute from a selector that will match multiple elements you should do so via the each function 

$('.item').each(function () { 
  console.log($(this).attr('datakey'));
});

Upvotes: 1

Jamie Dixon
Jamie Dixon

Reputation: 53991

At the moment you're getting the datahours (etc) for all items with the class .item. You can get these items in the click event.

$(".item").click(function(){

    var datakey = $(this).attr("datakey");   
    var datatitle = $(this).attr("datatitle");
    var dataaddress = $(this).attr("dataaddress");
    var datahours = $(this).attr("datahours");

    // CONSOLE
    console.log(datakey);

    });

As Xeon also pointed out, rather than use invalid attribute names, use data attributes instead.

Upvotes: 0

Alex Turpin
Alex Turpin

Reputation: 47776

If you can modify the HTML, I would highly suggest you use data attributes instead.

HTML:

<a href="#" class="item" title="Gallery" data-key="1" data-title="A+D Gallery"  data-address="123 Main St" data-hours="10:00, 10:30, 11:00, 11:30, 1:00">Gallery</a>

JS:

console.log($("a").data("key"), $("a").data("title"), $("a").data("address"), $("a").data("hours"));

http://jsfiddle.net/LDaMn/

Upvotes: 1

Collin O&#39;Connor
Collin O&#39;Connor

Reputation: 1351

You'll want something like this then

$('.item').click(function() {
    var datahours = $(this).attr("datahours");
});

The $(this) refers to the element that was clicked on which will be of class item

Upvotes: 0

DanielB
DanielB

Reputation: 20230

You are adding the click listener to the document not to the a element itself. If you add a click handler to every a tag you'll get what you need.

$(function() {
    $('a.item').click(function() {
         // this is the a tag you clicked.
         console.log($(this).attr("datakey"));
    });
});

Upvotes: 0

Related Questions