jquery - 选择器 nth-child 给出意外的输出

Question

我试图使用 class g-b 获取每个 div 中的第一个 span:

<div class="g-b">
    <div class="g-b">
        <span> $219.99 </span>
    </div>
    <div class="">
        List price:
        <span> $329.99 </span>
    </div>
</div>

<div class="g-b">
    <span> $39.99 </span>
</div>

正如您所看到的，有两个 class g-b 的 div，其中 first span child 的文本为:“$219.99”和“$39.99”。因此使用 Jquery 来获取它们:

var t = $('.g-b span:nth-child(1)').text();
alert(t); 

这为我提供了所有价格，而不仅仅是 g-b 第一个范围内的价格。这怎么可能？我应该怎么做才能获得所有带有 class g-b 的 div 中的第一个跨度？

Example at JsFiddle

ps 我不想使用 Jquery each() 或一些花哨的 Javascript(i++) 编码，我只是在寻找一个优雅的 CSS，比如 Jquery 的选择器，:eq() 也是可以接受的。

Answer 1

根据您的 HTML，您报告的行为是正确的。前 2 个价格都位于类 g-b 的容器内，这就是您获得所有价格的原因。要修复，请使用 >

$('.g-b > span:nth-child(1)')

jsfiddle:http://jsfiddle.net/5dpdM/6/

这样您将获得任何 .g-b > span 的所有第一个子级。

如果您只想获取第一个，请使用 :eq()

$('.g-b > span:eq(0)')

jsfiddle:http://jsfiddle.net/5dpdM/11/