选择隐藏元素并使用 jQuery 操作它们

Question

在一个带有“section”类的 div 包装器中，我有几十个 HTML 元素在页面上重复，看起来像这样：

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

每个里面都包含一定的信息。现在，我要做的是一旦页面加载，只显示前 5 个，将其余部分隐藏在一个用 jQuery 插入的新 div 中，当点击这个新 div 时，它将显示下一个 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();
    }
});

这隐藏了除前五个之外的所有内容。但是现在对于剩下的过程，我无法让它工作。我似乎无法正确选择那些带有“文章”类的隐藏 div 并操纵它们以按照我上面描述的方式运行。如果有更多 jQuery 经验的人可以指导我正确的方向并可能提供一个 sn-p，我将不胜感激。非常感谢！

Answer 1

您可以使用 :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();
    }
}​

Check Fiddle