jQuery选择器中的div内锚点

Question

我有以下 HTML 代码：

<div id="mycontainer">
   <p> title </p>
   <ul>
   <li><span>**</span><a href="...">KEY</a></li>
   </ul>
   <ul>
   ...
   </ul>
</div>

我该如何获取KEY值？换句话说，从id为“mycontainer”的div中，我该如何获取第一个ul中li元素的内容？

- Hommer Smith

Answer 1

$("#mycontainer ul:first a").text();

这里有一个代码演示：http://jsfiddle.net/8tvTt/

- Adriano Carneiro

---

我在想如果那个元素不存在，我会得到未定义还是空字符串？我测试了一下，结果得到的是空字符串，尽管我原以为会得到未定义。这正常吗？ - Hommer Smith

当您将未定义的变量与字符串连接时，它会变成一个字符串。 - dsgriffin

Answer 2

像这样的代码可以实现你需要的功能： $("#mycontainer ul:first a").text();

- dsgriffin

Answer 3

这个有效：

$('#mycontainer ul:eq(0) a').text();

这也可以：（更易读）

$('#mycontainer ul:first a').text();

- A. Wolff

Answer 4

请使用此代码：

$('#mycontainer a').text();

- Derek

---

+1 我不明白为什么这个回答会被踩，因为它对于 OP 的 HTML 是正确的。确实，我更喜欢使用更具体的选择器（请参见我的答案），但我不同意踩它。 - Adriano Carneiro

Answer 5

虽然很多现有的答案都能实现你想要的，但我认为你真正需要的是一些关于jQuery选择器和DOM遍历的熟悉度。

很多人似乎假定你想要链接元素的内部文本，但我不确定是否是这种情况。如果不考虑标记的变化和选择器速度，任何数量的答案都可以满足你的需求，包括像$('a').text();这样愚蠢的东西，因为它是你提供的标记中唯一的a。我们只能猜测情况。更有帮助的是理解每个答案的工作原理（以及为什么不成功的答案不行），以及为什么。

选择器的特异性是可取的，但您必须权衡实际上可能会产生昂贵的DOM遍历的成本和收益。您是否总是获取链接的文本内容？它可能包含HTML吗？您是否真的想要获取包装的<a>呢？

如果您只想获取#mycontainer内唯一的a的文本内容，那当然可以：

$("#mycontainer ul:first a").text();

但是$('#mycontainer').find('a').text();可能会更快。 （等等，你问什么是find()？为什么它更快？）但是如果KEY被格式化为<strong>，并且您希望将其保留到您正在处理的任何内容中，您可能需要改用.html()。如果您想要a本身，为什么不：

$("#mycontainer ul:first a");

但是如果每个 li 都有一个 a 呢？

$("#mycontainer ul:first li:first a").clone();

你也想要这个span吗？

$("#mycontainer ul:first li:first").clone();

或者

$("#mycontainer ul:first li:first").html();

你需要包含 <li> 标签吗？

$("#mycontainer ul:first li:first").clone();

多尝试，多阅读，这样你就不会像我一样对一些愚蠢，简单的声望如此渴望。

- crowjonah

Answer 6

您需要阅读jQuery选择器...但是请使用这个

$('#mycontainer ul:first a').text();

- fpilee