Question

在带有“section”类的div包装器中，我在页面上重复了几十个HTML元素，如下所示：

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

每个都包含内部的某些信息。现在，我想要做的是一旦页面加载，只显示前5个，将其余部分隐藏在用jQuery插入的新div中，当点击这个新div时，它将显示接下来的五个，然后是下一个再点击五次，依此类推，直至结束。我们的想法是，这个新的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经验的人可以指导我正确的方向并且可能提供一个片段，我将非常感激。非常感谢提前！

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

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

1 个答案: