Question

我正在尝试在.post

中的每个.index附加第一段

<div class="index">

        <div class="post">
            <p>append me!</p>
            <p>paragraph</p>
            <p>paragraph</p>
        </div>
        <div class="post">
            <p>append me!</p>
            <p>paragraph</p>
            <p>paragraph</p>
        </div>
        <div class="post">
            <p>append me!</p>
            <p>paragraph</p>
            <p>paragraph</p>
        </div>
    </div>
    <div class="single">
            <p>paragraph</p>
            <p>paragraph</p>
            <p>paragraph</p>
        </div>

我尝试了以下两种方法：

$('.index .post p:first').append('...');

$('.index .post p:first').each(function () {
    $(this).append('...');
});

但他们似乎只得到文档中的第一段，而不是每个 post的第一段

。

有人知道解决方案，并解释为什么这不起作用？

Answer 1

JSFIDDLE

找到匹配.index .post的所有元素，并为每个元素找到第一个段落并附加到它：

$('.index .post').each( function(){
    $( 'p:first', this ).append( '...' );
} );

具有单个选择器的版本是：

$('.index .post p:first-child').append('...');

:first伪类仅匹配单个元素（DOM层次结构中的第一个元素）。
:first-child找到每个父母的第一场比赛。

Answer 2

您需要使用:first-child代替:first

$('.index .post p:first-child').each(function () {
    $(this).append('...');
});

:first只匹配一个元素，:first-child选择器可以匹配多个：每个父元素一个。

Js Fiddle Demo

Answer 3

我会尝试类似的事情：

$('.index .post').each(function(){
    $(this).find('p:first').append('my text to append');
});

Answer 4

我的答案是@Sachin提供的答案的变体。

您应该使用:first-of-type伪类。这样，即使.post的第一个孩子是<div>，它仍然会选择第一个<p>元素。

$('.index .post p:first-of-type').each(function () {
    $(this).append('...');
});

这是一个有效的演示：http://jsfiddle.net/KTj42/1/

在CSS Tricks上阅读有关:first-of-type的更多信息。

Answer 5

如果您尝试在控制台中通过jquery进行选择，您将看到在返回的数组上只有第一个段落，因为您正在过滤它。你可以这样做，我认为它更具可读性。你在每个.post上做了一个。对于每一个。你会找到它上面的第一段并附加'...'

$('.index .post').each(function(){
   $(this).find('p:first').append('...');
})

找到每个div的第一段

5 个答案: