使用jQuery选择元素的子元素时遇到问题

我有一些嵌套元素，例如：

<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>

。。。但它不起作用。我如何在类=knownClass2中选择第二个？我也试过

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

。。。但它正在返回空值。我想我不太熟悉jQuery中第n个子选择器的工作原理。有人能解释一下它是如何工作的，并为我的问题提供一个可能的解决方案吗

谢谢， Hristo

使用获取jQuery对象中第n项的。该列表没有索引

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

这里有一个

你可以试试这个：

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

使用像这样的显式函数比将它们集中在一个字符串中要快，正如您所做的那样。这是因为jQuery的选择器引擎从右向左运行。使用这样的函数将首先关注ID元素，然后走到您想要的位置

为什么功能更快 jQuery使用。这个引擎令人惊讶，但需要注意的是，它在选择器查询中从右向左运行。这是什么意思？以jQuery代码段为例：

$('#foo a.bar');

Sizzle将首先找到页面上具有类栏的每个锚点，然后检查每个锚点是否是id为foo的元素的祖先。这不是优化的，尤其是当页面上有许多锚定标记时。Sizzle必须这样做，因为它不清楚您打算找到什么

然而，这是：

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

将首先找到id为foo的元素，然后使用类bar向下一级定位。速度快得多。您可以告诉jQuery这样做，因为您对DOM结构有先见之明。

您需要在knownClass2和第n个子对象之间有一个>，如下所示：

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

您可以这样做：

---

$span.KnownClass2.children:last.html

这对我来说很好：

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

请参见此处的JSBin：

可能您在其他地方有错误？

您可能需要尝试：

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

这是这样的：在其类为knownClass2的span下直接查找类型span的第二个子级，该类嵌套在id为knownId的元素中的某个位置

文档可在此处找到：

PS：这里还有一个基于上下文的解决方案：

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

---

span:nth-child2应该是正确的。确保equation>span.math span起作用。我认为当我尝试进行上述选择时，knownID可能不在DOM上，这可能是一个问题。我相信这不会返回任何结果，因为父knownID没有直接降低span.knownclass2。尽管这是有效的，如果页面上有许多span元素，速度会非常慢。特别是在IE中。如果您想要第二个元素而不是最后一个元素，这也不起作用。我认为当我尝试进行上述选择时，knownID可能不在DOM上，这可能是一个问题。有趣的jQuery的口号是“少写多做”…这段代码似乎正好相反。OP还要求获得第二个span而不是第一个span。这种方法还非常依赖于IDed divknownID元素和span.knownClass2之间div.knownClass、span和nobr的未命名元素。如果DOM发生更改，这会使代码更容易出现错误。对不起。对于我的web应用程序来说，速度是王道。在什么情况下，您会更改DOM而不更新访问它的JavaScript？争论没有意义。。。但我希望你能解释一下为什么你的方法比另一种更快？是因为解析字符串吗？提供了解释。如果需要进一步澄清，请告诉我。当然！如果您最终无法依赖knownID div，那么您可以始终从表达式中删除它，代码仍然可以工作-它不会那么安全，因为DOM中可能有其他具有knownClass2类的跨。因此这很有趣。。。你的解决方案有效，我可以实现我想要的。但是，Ramblingwood的解决方案在选择方面也很有效，但我希望发生的事情并不是这样，即使选择有效，而且我正在更改相同的属性。如果元素中没有任何数据，您可能会得到null作为响应。例如，$span.knownClass2.html应该返回span.knowClass2中的html。如果span.knownClass2中没有HTML，则结果将为空。

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