无法使用 jQuery 选择元素的子元素

Question

我有一些这样的嵌套元素：

<div id="knownID">
 <div class="knownClass">
   <span>
     <nobr>
       <span class="knownClass2">
         <span> ... </span>       <--- this keeps expanding deeper and deeper
         <span></span>            <--- this is the one I need!!!
       </span>
     </nobr>
   </span>
 </div>
</div>

我正在尝试通过这样做来选择它...

$('#knownID span.knownClass2 span:nth-child(2)').html();

...但它不工作。如何在 <span> 和 class="knownClass2" 中选择 2nd <span>？我也试过...

$('#knownID > span.knownClass2 span:nth-child(2)').html();

... 但它返回 null。我想我对 nth-child() 选择器在 jQuery 中的工作方式不是很熟悉。有人介意解释它的工作原理并为我的问题提供可能的解决方案吗？

谢谢， 赫里斯托

Answer 1

你可能想试试：

$("#knownID span.knownClass2 > span:nth-child(2)").html();

内容如下：直接在类为“knownClass2”的跨度下查找类型为 span 的第二个子级，该跨度嵌套在 id 为“knownId”的元素内的某处。

文档可以在这里找到：

http://api.jquery.com/category/selectors/

PS：这也是一个基于上下文的解决方案：

$(" > span:eq(1)", "span.knownClass2", "div#knownID").html();

Answer 2

这对我来说很好用：

$("#knownID .knownClass .knownClass2 span:nth-child(2)")

在此处查看 JSBin：http://jsbin.com/opoji3/edit

也许你在其他地方有错误？

Answer 3

使用:eq() selector 获取jQuery 对象中的第n 个项目。该列表的索引为零。

$("div#knownID span.knownclass2 span:eq(1)").html()

这是demohttp://www.jsfiddle.net/96RyH/1/

Answer 4

你可以试试这个：

$('#knownID')
    .children('div.knownClass')
    .children('span')
    .children('nobr')
    .children('span.knownClass2')
    .children('span:first')
    .next()
    .html();

使用像这样的显式函数比将它们集中在一个字符串中要快，就像你所做的那样。这是因为 jQuery 的选择器引擎从右到左工作。使用这样的函数将首先在 ID 元素上归零，然后向下移动到您想要的位置。

为什么函数更快
jQuery 使用Sizzle Selector Engine。这个引擎很棒，但需要注意的一点是，它在选择器查询中从右到左工作。那是什么意思？以这个 jQuery sn-p 为例：

$('#foo a.bar');

Sizzle 将首先查找页面上每个具有类bar 的锚点，然后检查每个锚点以查看它是否是id 为foo 的元素的祖先。这没有优化，特别是如果页面上有很多锚标记。 Sizzle 必须这样做，因为它不明确知道您要查找的内容。

但是：

$('#foo').children('a.bar');

将首先找到 id 为 foo 的元素，然后下一级到类为 bar 的锚点。它要快得多。你可以告诉 jQuery 这样做，因为你对你的 DOM 结构有预知。

Answer 5

你可以这样做：

$("span.KnownClass2").children(":last").html();

Answer 6

您需要在knownClass2 和nth-child 之间有一个>，如下所示：

$('#knownID  span.knownClass2 > span:nth-child(2)').html();