Question

我有一个用于显示新闻文章的页面。

<article>

<h4>News Article One</h4>
<h5>25th December 2012</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at purus at dui iaculis adipiscing. Maecenas viverra arcu nec libero accumsan commodo convallis purus sagittis. Etiam fermentum commodo libero sit amet tincidunt. Fusce eu dolor fermentum risus ornare imperdiet rhoncus eu ipsum. Etiam eleifend tempor lacus. Praesent blandit dui at nulla laoreet vehicula. In rhoncus ornare leo venenatis interdum. Vestibulum hendrerit aliquet lectus. Nam ullamcorper ullamcorper sem, a congue massa accumsan vitae.</p>

<p>Etiam ullamcorper mattis lectus, nec mollis odio condimentum vel. Nunc quam ligula, laoreet eu mollis posuere, ultrices varius diam. Ut sapien quam, mattis consequat adipiscing vel, posuere non lacus. Donec id mauris purus. Nam iaculis aliquam pellentesque. Vestibulum eleifend nulla eget lacus aliquam rutrum. Suspendisse adipiscing vestibulum lorem, mattis hendrerit odio faucibus vel.</p>

</article>

<article>

<h4>News Article Two</h4>
<h5>25th January 2012</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at purus at dui iaculis adipiscing. Maecenas viverra arcu nec libero accumsan commodo convallis purus sagittis. Etiam fermentum commodo libero sit amet tincidunt. Fusce eu dolor fermentum risus ornare imperdiet rhoncus eu ipsum. Etiam eleifend tempor lacus. Praesent blandit dui at nulla laoreet vehicula. In rhoncus ornare leo venenatis interdum. Vestibulum hendrerit aliquet lectus. Nam ullamcorper ullamcorper sem, a congue massa accumsan vitae.</p>

<p>Etiam ullamcorper mattis lectus, nec mollis odio condimentum vel. Nunc quam ligula, laoreet eu mollis posuere, ultrices varius diam. Ut sapien quam, mattis consequat adipiscing vel, posuere non lacus. Donec id mauris purus. Nam iaculis aliquam pellentesque. Vestibulum eleifend nulla eget lacus aliquam rutrum. Suspendisse adipiscing vestibulum lorem, mattis hendrerit odio faucibus vel.</p>

</article>

我只希望显示每篇文章的第一段，并且只有点击“阅读更多”链接时，才能看到其他段落。

目前我正在使用它：

<script>
$(document).ready(function() {
 $('article p').eq(1).hide();
 $('a.more').click(function() {
  $('article p').eq(1).show();
  $(this).hide();
  return false;
 });
});
</script>

然而，上述仅适用于第一篇文章，第一段，我希望它适用于所有文章，第一段。

所有时间和帮助表示赞赏。

由于

Answer 1

$('article').each(function(){ $(this).find('p:not(:first)').hide()});

这是一个有效的jsFiddle：http://jsfiddle.net/fdp5L/1/

以下是每篇文章的“展开链接”示例：http://jsfiddle.net/fdp5L/5/

HTML：

<article>
    <p>first 1</p>
    <p>second 1</p>
    <p>third 1</p>
    <p>fourth 1</p>
    <div class="more">more...</div>
</article>
<article>
    <p>first 2</p>
    <p>second 2</p>
    <p>third 2</p>
    <p>fourth 2</p>
    <div class="more">more...</div>
</article>

的javascript：

$('article').each(function(){ $(this).find('p:not(:first)').hide()});
$('.more').on('click', function(){
    $(this).hide().closest('article').find('p').show();    
})

Answer 2

$('article').each(function() {
 $('p:eq(1)', this).hide();
});

OR

$('p:eq(1)', $('article')).hide();

OR

$('p:gt(0)', $('article')).hide();

OR

$('p:not(:first)', $('article')).hide();

并在.more上点击

$('a.more').click(function() {
  $('p:eq(1)', $('article')).show();
  $(this).hide();
  return false;
});

如果a.more是article的直接孩子，那么您可以尝试：

$('a.more').click(function(e) {
  e.preventDefault();
  $('p:eq(1)', $(this).parent()).show();
  $(this).hide();
});

如果没有，请尝试：

 $('a.more').click(function(e) {
    e.preventDefault();  
    $(this).closest("article").find("p:eq(1)").show();
    item.hide();
 });

Answer 3

一个简单的查询：

$(function() {


  $("article").each(function() {

    // hide all second paragraphs
    $(this).find("p:not(:first)").hide();
    // add read more links
    $(this).find("p:visible").append("<p><a href='#' class='read-more'>read more</a></p>"); 

  });

  $(".read-more").click(function() {

    // show the hided paragraph
    $(this).closest("article").find("p").fadeIn();
    // hide the read more link
    $(this).hide();

  });

});

live example in JsBin

Answer 4

尝试，

$('p:eq(1)', $('article')).hide();

完整代码：

$(document).ready(function() {
    $('p:eq(1)', $('article')).hide();

    $('a.more').click(function() {
        $('p:eq(1)', $('article')).show();
        $(this).hide();
        return false;
    });
});

DEMO

Answer 5

我想你想要显示除第一个之外的所有Para，并在点击更多按钮/链接时显示剩余的Para。这样做

$(document).ready(function() {
    $('article p').hide();
    var articles=$('article');
    $.each(articles,function(){
        $(this).find("p").first().show();
    });

 $('a.more').click(function(e) {
    e.preventDefault();  
    var item=$(this);
    item.closest("article").find("p").show();
    item.hide();
   return false;
 });
});

假设你在article元素中有一个带有类more的标记。

工作演示http://jsfiddle.net/jtQ5b/22/

JQuery - 仅显示每篇文章的第一段

5 个答案: