5

「section」のクラスを持つdivラッパー内に、次のような数十のHTML要素がページ全体で繰り返されています。

<div class="section">
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
</div>

そして、それぞれに特定の情報が含まれています。今、私がやろうとしているのは、ページが読み込まれたら、最初の5つだけを表示し、jQueryで挿入された新しいdivで残りを非表示にします。この新しいdivをクリックすると、次の5つが表示され、次に次の5つが表示されます。もう一度クリックすると5つ、以下同様に最後まで続きます。この新しいdivは、常にページの最後に配置されるボタンとして機能し、先ほど述べたこれらの注文に応答するという考え方です。これまでのところ、私はこれを理解しています：

$('.section').each(function () {
    var $this = $(this),
        $allArticles = $this.find('.article');

    if ($allArticles.length > 5) {
        $('<div/>').addClass('hidden-articles').appendTo(this).append($allArticles.slice(5));
        $('.hidden-articles .article').hide();
    }
});

そして、それは最初の5つを除いてすべてを隠します。しかし、残りのプロセスでは、それを機能させることができません。クラス「article」を持つ非表示のdivを適切に選択し、上記のように機能するように操作することができないようです。jQueryの経験が豊富な人が私を正しい方向に導き、スニペットを提供してくれれば幸いです。よろしくお願いします！

4

1 に答える 1

2

：hiddenおよび：ltセレクターを使用して、探している機能を取得できます。

$('.section').each(function() {
    var $this = $(this),
        $allArticles = $this.find('.article');

    if ($allArticles.length > 5) {
        $('<div/>').addClass('hidden-articles')
                   .appendTo(this).append($allArticles.slice(5));
        $this.find('.hidden-articles .article').hide();

    }
});

$('#show').on('click',function() {
    var $hidden = $('.hidden-articles .article:hidden:lt(5)');
    $hidden.show();
});​

アップデート

// If one one element to search 
var elem = '.section' ;
hideArticles(elem);

// If Multiple Elements on the page...
$('.section').each(function() {
    hideArticles(this);
});

$('#show').on('click', function() {
    var $hidden = $('.hidden-articles .article:hidden:lt(5)');
    $hidden.show();
});

function hideArticles(elem) {
    var $this = $(elem),
        $allArticles = $this.find('.article');

    if ($allArticles.length > 5) {
        $('<div/>').addClass('hidden-articles')
                   .appendTo(this).append($allArticles.slice(5));
        $this.find('.hidden-articles .article').hide();
    }
}​

フィドルをチェック

于 2012-12-12T23:37:22.517 に答える