Wie bekomme ich den Attr mit 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> 

Ich habe den obigen HTML-Code und ich möchte das Attribut rel Attribut erhalten, wenn ich auf das Bild klicke. Ich schrieb dieses jQuery-Skript, aber es scheint nicht zu funktionieren:

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

Answer 1

diese ersetzen:

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

mit diesem:

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

Wie es jetzt ist Sie tun eine globale Suche nach Elementen mit dem Literal-Tag-Namen this

Ein äquivalenter Code wäre auch:

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

von den Blicken von ihm Obwohl die Einzelteile sind image/caption Kombinationen und Sie würden nicht wirklich andere Bilder erwarten, wobei in diesem Fall ist es besser, nur tun:

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

Oder vielleicht geben es eine beschreibende Klasse und ersetzen img durch img.someclassname - dies würde es so machen, dass, wenn Sie Ihren HTML-Code später zu bearbeiten, Ihr Javascript nicht wegen Ihrer spezifischen Selektor bricht.

Darüber hinaus könnten Sie einfach binden das Click-Ereignis auf die Bilder selbst:

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

Answer 2

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

Answer 3

Sie nicht ‚dies‘ wie diese verwenden können.

Versuchen:

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