Как получить attr с помощью 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>

У меня есть приведенный выше HTML-код, и я хочу получить значение атрибута rel при нажатии на изображение. Я написал этот скрипт jQuery, но он не работает:

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

Answer 1

Заменить это:

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

С этим:

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

Как сейчас, вы выполняете глобальный поиск элементов с буквенным именем тега this

Эквивалентный код также будет:

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

Хотя, судя по всему, элементы представляют собой комбинации изображений / надписей, и вы не ожидаете, что другие изображения будут лучше, в этом случае лучше просто сделать:

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

Или, может быть, дать ему описательный класс и заменить img на img.someclassname - это сделает так, что если вы позже отредактируете свой HTML, ваш Javascript не сломается из-за вашего конкретного селектора.

Кроме того, вы можете просто привязать событие click к самим изображениям:

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

Answer 2

Вы не можете использовать «это» таким образом.

Попытка:

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

Answer 3

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