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

2019-07-04 01:30:44 阅读：183 来源： 互联网

标签：jquery javascript jquery-selectors

在一个带有“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经验的人可以指导我正确的方向并且可能提供一个片段,我将非常感激.提前谢谢了！

解决方法:

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

UPDATE

// 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,javascript,jquery-selectors
来源： https://codeday.me/bug/20190704/1372476.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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