div内的jQuery选择器锚点答案

【问题标题】：jQuery selector anchor inside divdiv内的jQuery选择器锚点
【发布时间】：2012-11-20 17:23:03
【问题描述】：

我有以下 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中获取元素的内容呢？

【问题讨论】：

标签： javascript jquery html selector

【解决方案1】：

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

在这里，拉小提琴：http://jsfiddle.net/8tvTt/

【讨论】：

我想知道该元素是否不存在。我会得到未定义或空字符串吗？我测试了它，我得到了空字符串，即使我期望未定义。这正常吗？
当你把 undefined 和一个字符串连接起来时，它就变成了一个字符串

【解决方案2】：

这样的事情会实现你所追求的：

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

【讨论】：

【解决方案3】：

这行得通：

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

这也有效：（更具可读性）

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

【讨论】：

【解决方案4】：

使用这个：

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

【讨论】：

+1 我不明白为什么这被否决了，因为它对 OPs HTML 是正确的。没错，我会更喜欢更具体的选择器（请参阅我的回答），但不同意 downvote。

【解决方案5】：

虽然很多现有答案都可以实现您所追求的，但我认为您真正要求的（或至少您真正需要的）是对 jQuery selectors 和 DOM traversing 的熟悉程度。

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

选择器的特殊性是可取的，但您必须权衡在 DOM 中实际昂贵的旅行的成本和收益。你会一直得到链接的文本内容吗？它可能包含html吗？你真的想得到包装<a>吗？

如果你只想要#mycontainer里面唯一的a的文字内容，当然：

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

但$('#mycontainer').find('a').text(); 可能更快。（等等，find() 是什么？，你问，为什么它更快？）但是如果 KEY 的格式是 <strong>ly，并且你希望它延续到你正在做的任何事情上呢？您可能想改用.html()。如果你想要a 本身，为什么不呢：

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

但是如果每个li 都有一个a? 会怎样

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

你也想要跨度吗？

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

或

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

你也想要包装 <li> 吗？

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

玩玩，多读一些，然后你就不会让每个人（包括我自己）都如此贪婪地寻找一些愚蠢、轻松的代表。

【讨论】：

【解决方案6】：

你需要阅读 jquery 选择器...但是使用这个

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

【讨论】：