Question

我试图通过span

获取每个div中的第一个class g-b

<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++)编码，我只是想为Jquery寻找一个优雅的CSS选择器，:eq()也是可以接受的。

Answer 1

对于第一个元素，您可以简单地使用第一个选择器，如下所示：

var t = $('.g-b span:first').text();

此外，nth暗示您想要迭代一组给定的元素，但您只希望每次首次出现。 nth对于像＃34这样的问题非常有用;给我找到每一秒/第三/第四/第n个元素＆＃34;。如果您想要一个元素，请使用:eq(index)或：first（：first equals :eq(0)）如果是第一个元素。

Answer 2

根据您的HTML，您报告的行为是正确的。前两个价格都在一个类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/

Answer 3

试试这个 - 只修改了您的代码，检查它是否合适

 var t = $('div div:first-child span:first-child').text();
 alert(t);

选择器nth-child提供意外输出

3 个答案: