0

我有以下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 更新第二个跨度中的文本。

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

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

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

4

4 回答 4

5

你可以像这样实现你想要的:

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

$.each( updated, function( key, value ) {
    $(this).find('span').eq(1).text('New text here');
});
于 2013-07-15T14:34:07.617 回答
3

.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

于 2013-07-15T14:35:44.510 回答
2

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

使用这个选择器:

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

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

选择器说明: 此选择器抓取spanwhich 后跟另一个spaninside .row-updated

我认为会比从另一个答案实际使用运行得更快,.find().eq()因为它的功能开销更少(它只是一个 css 选择器)。

当然,考虑到第二个跨度之后是第一个跨度,否则您将需要findand eq

见我的jsFiddle

于 2013-07-15T14:35:23.730 回答
2

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

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

所以你可以使用:

var allMySecondSpans = $('.row-updated div span:nth-child(2)'); // Or 1 of the other ways
allMySecondSpans.text('New text here');
于 2013-07-15T14:48:05.883 回答