How to get the attr with jQuery?

Question

<div class="item">
  <p><img src="images/photos_sample1.jpg" 
          border="0" rel="images/google_map.jpg"></p>
  <p>Dining Area</p>
</div>
<div class="item">
  <p><img src="images/photos_sample2.jpg" 
          border="0" rel="images/sample_photo.jpg"></p>
  <p>Pool Area</p>
</div>

I have the above HTML code and I want to get the rel attribute's value when I click the image. I wrote this jQuery script, but it doesn't seem to work:

$('div.item').click(function() {
  var getvalue = $('this > p > img').attr('rel');
  alert(getvalue);
});

Paolo Bergantino · Accepted Answer · 2009-07-15 01:34:52Z

Replace this:

var getvalue = $('this > p > img').attr('rel');

With this:

var getvalue = $(this).find('p > img').attr('rel');

As it is right now you are doing a global search for elements with the literal tag name this

An equivalent code would also be:

var getvalue = $('p > img', this).attr('rel');

Although by the looks of it the items are image/caption combinations and you wouldn't really expect other images, in which case it is better to just do:

var getvalue = $(this).find('img').attr('rel');

Or maybe give it a descriptive class and replace img with img.someclassname - this would make it so that if you edit your HTML later on your Javascript doesn't break because of your specific selector.

Furthermore, you could just bind the click event to the images themselves:

$('div.item img').click(function() {
    var getvalue = $(this).attr('rel');
});

alex · Accepted Answer · 2009-07-15 01:29:57Z

0

$('div.item').click(function() {
        var getvalue = $(this).find('> p > img').attr('rel');
        alert(getvalue);
        });

answered Jul 15, 2009 at 1:29

alex

492k205 gold badges890 silver badges991 bronze badges

Comments

SolutionYogi · Accepted Answer · 2009-07-15 01:30:21Z

0

You can't use 'this' like this.

Try:

$('div.item').click(function() {
        var getvalue = $('p > img', this).attr('rel');
        alert(getvalue);
        });

answered Jul 15, 2009 at 1:30

SolutionYogi

32.3k12 gold badges73 silver badges79 bronze badges

Collectives™ on Stack Overflow

How to get the attr with jQuery?

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related