Question

我有以下html

<div class="row-updated">
    <div>
        <span>Title</span>
        <span>Some text here</span>
    </div>
</div>

<div class="row">
    <div>
        <span>Title</span>
        <span>Some text here</span>
    </div>
</div>

<div class="row">
    <div>
        <span>Title</span>
        <span>Some text here</span>
    </div>
</div>

<div class="row-updated">
    <div>
        <span>Title</span>
        <span>Some text here</span>
    </div>
</div>

我想更新每个div的第二个范围中的文本，并使用“row-updated”类。

var updated = $('.row-updated span:eq(1)');

$.each( updated, function( key, value ) {
    $(this).text('New text here');
});

但这似乎并没有更新所有行。它会更新第一个而不是第二个。

Answer 1

你可以达到你想要的效果：

var updated = $('.row-updated');

$.each( updated, function( key, value ) {
    $(this).find('span').eq(1).text('New text here');
});

Answer 2

.eq()没有按照您的想法行事。您需要在此使用.nth-child()。

// nth-child() is 1-indexed as @ᾠῗᵲᄐᶌ  pointed out in the comment (thanks!).
var updated = $('.row-updated span:nth-child(2)');

$.each( updated, function( key, value ) {
    $(this).text('New text here');
});

.eq会将nth元素从整个结果集中返回，而不是第n个span。

Answer 3

:eq()过滤了.row-updated span选择器的整个jQuery集合。

使用此选择器：

var updated = $('.row-updated span + span');

$.each( updated, function( key, value ) {
    $(this).text('New text here');
});

选择器的说明： 此选择器会抓取span，后面跟span内的另一个.row-updated。

我认为比其他答案实际使用.find().eq()的速度更快，因为它的功能开销较小（仅限css选择器）。

当然，考虑到第二个跨度后面是第一个跨度，否则您将需要find和eq。

查看我的jsFiddle

Answer 4

好的，因为所有答案仍然有.each() ...

您不需要隐式迭代，因为jQuery能够返回jQuery对象。

所以你可以使用：

var allMySecondSpans = $('.row-updated div span:nth-child(2)'); // Or 1 of the other ways
allMySecondSpans.text('New text here');

jQuery选择器$ .each不循环遍历所有div

4 个答案: