点击元素的jQuery子元素

Question

我有一个链接列表，它们都附有点击事件。我需要从子A链接中获取ID。所以在下面的示例中，如果我单击第一个列表元素，我需要返回google。

我尝试过`'$this a'`，但无法完全弄清楚语法。

$("ul li").click(function(event){
  $("input").val($(this).html());             
});

<ul>
    <li><a href="http://www.google.com" id="google">Google</a>
</ul>

- Tom

Answer 1

我没有看到样本HTML，但是

$(this).find('a:first').attr('id')

如果不是你想要的，请修复a:first选择器

this指代触发事件的元素

- smoothdeveloper

---

我能提议使用以下代码吗：jQuery(this).find('a:first').attr('id')？我在一个项目中与prototype发生了冲突。 - Dimitrios Mistriotis

Answer 2

为了让您的代码更加整洁，让我们像这样将触发器与函数绑定： （我建议您给UL一个ID，这样它就只针对UL内的元素）

$('ul li').bind('click', getAnchorId);

被调用的函数（getAnchorId）获取被点击元素（ul li）的子元素（a）的ID属性，并将其应用于一个变量（anchorId），为了显示它是否获取了正确的信息，我将结果放在一个弹出框中。

function getAnchorId() {
    var anchorId = $(this).children('a').attr('id');
    alert(anchorId);
}

现在你可以随心所欲地使用那个变量 :) 希望这有所帮助 :)

- Wayne Austin

---

这是非常主观的，我个人更喜欢使用匿名函数，特别是因为这很具体化。 - Pim Jager

同意，并且使用 bind 只是额外的按键操作，而不是使用 .click。 - redsquare

Answer 3

您可以使用children方法：

$(this).children('a').eq(0).attr('id');

我不确定语法是否正确，但类似这样的东西应该可以工作。

- Crossbrowser

---

使用数组索引器会返回一个 DOM 对象，因此 .attr 方法不存在并且会出错。您需要使用 $(this).children('a')[0].id 或 $(this).children('a').get(0).id 或 $(this).children('a').attr('id'); - redsquare

你确定它返回一个DOM对象吗？无论如何，我说过我不确定，我会在测试后进行更正，如果有错误的话。 - mbillard

我使用了.eq(int)来修复它，该方法返回指定索引处的jQuery元素。 - mbillard