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>在<span>内选择第二 class="knownClass2"？我也试过......

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

...但它返回null。我想我不太熟悉nth-child（）选择器如何在jQuery中工作。有人会介意解释它是如何工作的，并为我的问题提供可能的解决方案吗？

谢谢，赫里斯托斯

Answer 1

您可能想尝试：

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

这是：在类别为“knownId”的元素内嵌套某个类的“knownClass2”的span下直接找到span类型的第二个子类。

可在此处找到文档：

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

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

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

Answer 2

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

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

这是demo http://www.jsfiddle.net/96RyH/1/

Answer 3

你可以试试这个：

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

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

为什么功能更快
jQuery使用Sizzle Selector Engine。这个引擎很棒，但需要注意的是它在选择器查询中从右到左工作。那是什么意思？举个例子，这个jQuery片段：

$('#foo a.bar');

Sizzle将首先在页面上找到具有类bar的每个锚点，然后检查每个锚点以查看它是否为标识为foo的元素的祖先。这不是优化的，特别是如果页面上有许多锚标记。 Sizzle必须这样做，因为它不明确知道你想要找到什么。

但是：

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

首先会找到标识为foo的元素，然后将一个级别降级为具有类bar的锚点。它快得多。你可以告诉jQuery这样做，因为你已经预知了你的DOM结构。

Answer 4

这对我来说很好用：

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

请参阅此处的JSBin：http://jsbin.com/opoji3/edit

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

Answer 5

您需要在>和knownClass2之间设置nth-child：

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

Answer 6

你可以这样做：

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

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

6 个答案: