Jquery：如何获取点击的“li”标签中包含的锚点的URL？

Question

以下是我网页中的一段HTML代码：

以下是我页面中的HTML片段：

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

我希望能够获取被点击的li标签的url。我的"jQuery fu"不够好。我知道如何绑定类名为"prodcat-line"的li元素的点击事件，但是我不知道如何提取被点击项中嵌套的标签 - 有人能帮忙吗？

- oompahloompah

Answer 1

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

这里有一个例子。

- Arthur Halma

---

非常感谢，这正是我所需要的。等我有能力时（大约7分钟后），我会接受您的答案。 - oompahloompah

Answer 2

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

请查看示例，网址为http://jsfiddle.net/4XU8h/

- Hussein

Answer 3

这样怎么样：

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

因为您只是在 LI 中拥有链接，所以无需参考 LI。每次单击 LI 都会自动指向链接。

- nfechner

Answer 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")...

- James Wiseman

Answer 5

当您单击li标签时，可以获取其子元素。有两种方法可以实现此操作。

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

- Yoann