3

ニュース記事を表示するために使用されるページがあります。

<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>

ただし、上記は最初の記事の最初の段落でのみ機能し、すべての記事の最初の段落で機能することを望みます。

いつもお世話になっております。

ありがとう

4

5 に答える 5

5 
$('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();    
})
于 2012-05-07T18:16:05.210 に答える
1

試す、

$('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;
    });
});

デモ

于 2012-05-07T18:22:39.067 に答える
1 
$('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();
 });
于 2012-05-07T18:13:50.950 に答える
1

簡単なクエリ:

$(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();

  });

});

JsBin の実際の例

于 2012-05-07T18:17:41.457 に答える
0

最初のものを除くすべての 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;
 });
});

morearticle 要素内にクラスを持つタグがあると仮定します。

動作デモhttp://jsfiddle.net/jtQ5b/22/

于 2012-05-07T18:28:14.260 に答える