Làm thế nào để có được attr với 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> 

Tôi có mã HTML ở trên và tôi muốn nhận giá trị của thuộc tính rel khi tôi nhấp vào hình ảnh. Tôi đã viết kịch bản jQuery này, nhưng nó dường như không làm việc:

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

Answer 1

Thay thế này:

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

Với điều này:

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

Vì nó là ngay bây giờ bạn đang làm tìm kiếm toàn cầu cho các phần tử có tên thẻ theo nghĩa đen this

Mã tương đương cũng sẽ là:

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

Mặc dù bởi vẻ của nó trở thành mặt hàng là sự kết hợp hình ảnh/caption và bạn sẽ không thực sự mong đợi hình ảnh khác, trong trường hợp này nó là tốt hơn để chỉ cần làm:

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

Hoặc có thể cung cấp cho nó là một lớp mô tả và thay thế img với img.someclassname - điều này sẽ làm cho nó để nếu bạn chỉnh sửa HTML của bạn sau này trên Javascript của bạn không phá vỡ vì chọn cụ thể của bạn.

Bên cạnh đó, bạn chỉ có thể ràng buộc các sự kiện click vào những hình ảnh mình:

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

Bạn không thể sử dụng 'này' như thế này.

Thử:

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