Jquery:如何在点击的'li'标签中获取锚点的url?

时间:2011-04-11 07:11:19

标签: jquery

以下是我的一个页面中的HTML片段:

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

我希望能够检索点击的li标记的网址。我的“jQuery fu”不是它应该是什么。我知道如何绑定类“prodcat-line”的li元素的click事件,但我不知道如何从被点击的项目中提取嵌套标签 - 任何人都可以帮忙吗?

5 个答案:

答案 0 :(得分:10)

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

示例here

答案 1 :(得分:2)

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

检查http://jsfiddle.net/4XU8h/

处的工作示例

答案 2 :(得分:1)

怎么样:

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

由于您只在LI中有链接,因此您无需引用LI。无论如何,每次点击LI都会定位链接。

答案 3 :(得分:0)

如果您选择li,那么

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

然后,您可以使用'&gt;'选择直接后代:

$(".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")...

答案 4 :(得分:0)

当您点击li标签时,您可以拥有他的子元素。两种方法。

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