jQueryでattrを取得するには？

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> 

私は上記のHTMLコードを持っており、画像をクリックするとrel属性の値を取得したいと考えています。私はこのjQueryのスクリプトを書きましたが、動作していないよう：それは今あるとして、あなたがやっている

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

：これにより

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

：

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

Answer 1

はこれを交換してくださいリテラルタグ名を持つ要素のグローバル検索this

等価コードは

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

それのルックスでアイテムは、画像/キャプションの組み合わせであり、あなたは本当にそれだけで行うには優れている場合には他の画像、期待していないものの：

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

それとも与えるをこれは説明的なクラスで、imgをimg.someclassnameに置き換えます。これは、後であなたのHTMLを編集すると、あなたの特定のセレクタが原因でJavascriptでブレークしないようにします。

さらに、あなただけの画像に自らをクリックイベントをバインドすることができます：あなたは「この」はこのように使用することはできません

$('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

。

試してみてください。

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