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

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

试试，

$('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 3

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

或

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

或

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

或

$('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 4

一个简单的查询：

$(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 5

我猜你想显示除第一个以外的所有 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;
 });
});

假设您在文章元素中有一个类more 的标签。

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