代码之家 › 专栏 › 技术社区 › Hristo

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

css-selectors selection jquery-selectors jquery

Hristo · 技术社区 · 14 年前

我有一些嵌套元素:

<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" ? 我也试过。。。

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

... 但它返回空值。我想我不太熟悉jQuery中的nth-child()选择器是如何工作的。有人能解释一下它的工作原理并为我的问题提供一个可能的解决方案吗?

谢谢, 赫里斯托

6 回复 | 直到 14 年前

Pan Thomakos 14 年前

您可能想尝试:

$("#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();

Alec Gorge 14 年前

这对我很有用:

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

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

也许你在别的地方出错了?

John Hartsock 14 年前

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

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

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

Stephen 14 年前

你可以试试这个:

$('#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 ,然后检查每个元素是否是id为的元素的祖先 foo . 这并没有优化,尤其是当页面上有许多锚标记时。Sizzle必须这样做,因为它不清楚您打算找到什么。

然而,这:

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

将首先找到id为的元素 福 ,然后下一级到带类的锚 酒吧 . 速度快多了。您可以告诉jQuery这样做,因为您已经预先知道了DOM结构。

jwegner Micromega 14 年前

你可以这样做:

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

BudgieInWA 14 年前

你需要有一个 > 之间 knownClass2 以及 nth-child 像这样的事情:

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