使用jQuery选择隐藏元素并对其进行操作

Question

使用jQuery选择隐藏元素并对其进行操作

5

在类名为“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();
    }
});

这将隐藏除前五个之外的所有内容。但是，对于其余的过程，我无法使其正常工作。我似乎无法正确选择那些具有"class"为"article"的隐藏div，并操纵它们以按照上述描述运行。如果有更有经验的jQuery用户能指导我正确的方向并提供一些片段，我将不胜感激。提前致谢！

- Blueshift

你应该在这里发布你的 HTML 代码。 - The Alpha

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sushanth -- · Accepted Answer

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

查看示例