Jquery: Как мне получить URL привязки, содержащейся в нажатом теге 'li'?

#jquery

Вопрос:

Ниже приведен фрагмент HTML на одной из моих страниц:

 <li class="prodcat-line">
   <a title="foobar" class="prodcat" href="/some/url.php">Foobar</a>
</li>

Я хочу иметь возможность извлекать URL-адрес нажатого тега li. Мой «jQuery fu» НЕ ТАКОЙ, КАКИМ ОН ДОЛЖЕН БЫТЬ. Я знаю, как привязать событие щелчка элементов li класса «prodcat-line», но я не знаю, как извлечь вложенные теги из нажатого элемента — кто-нибудь может помочь?

Ответ №1:

 $('.prodcat-line').click(function(){
    alert($('a', this).attr('href'));
    return false;
});

Вот пример.

Ответ №2:

 $('a').click(function(e) {
    e.preventDefault();
    alert($(this).attr('href'));
});

Проверьте рабочий пример на http://jsfiddle.net/4XU8h /

Ответ №3:

Как насчет:

 $('.prodcat').click(function(event) {
    var url = $(this).attr('href');
});

Поскольку у вас есть только ссылка внутри LI, вам не нужно ссылаться на LI. Каждый щелчок по LI в любом случае будет нацелен на ссылку.

Ответ №4:

Если вы выберете li вот так

 $(".prodcat-line")....

Затем вы можете либо выбрать прямых потомков, используя ‘>’:

 $(".prodcat-line>a")....
$(".prodcat-line>a.prodcat")....
$(".prodcat-line>.prodcat")....

Или, используя метод jQuery children :

 $(".prodcat-line").children("a")...
$(".prodcat-line").children("a.prodcat")...
$(".prodcat-line").children(".prodcat")...

Или из любого потомка, опустите > и используйте только пробел:

 $(".prodcat-line a")....
$(".prodcat-line a.prodcat")....
$(".prodcat-line .prodcat")....

Или, опять же, используя метод jQuery, на этот раз find :

 $(".prodcat-line").find("a")...
$(".prodcat-line").find("a.prodcat")...
$(".prodcat-line").find(".prodcat")...

Ответ №5:

Когда вы нажимаете на тег li, вы можете получить его дочерние элементы. Есть два способа сделать это.

 $('.prodcat-line').click(function() {
    $(this).children('a').attr('href');
    //or
    $('a', this).attr('href');
});