jQuery计算页面上的div数量并隐藏吗? [英] jQuery count amount of divs on a page and hide?

问题描述

我在页面上显示的div数量可以在1到50之间，所有这些都将生成并通过PHP加载到HTML中，但是我只想最初显示9，然后再在上面显示9单击一个按钮，直到全部加载完毕.

I'm displaying an amount of divs on a page that can be anywhere from 1-50, all will be generated and loaded into the HTML via PHP, but I want to only display 9 initially and then load an additional 9 on a button click until all are loaded.

   var alldivs = $('.preview-container').hide();

$('button').on('click', function(){
    var turn = alldivs.splice(0, 9);
    if (turn.length) {
        console.log(turn);
        turn.fadeIn();
    }
});

推荐答案

这是我认为可以做到的最短代码:

This is the shortest code I can think to do this:

var alldivs = $('div'); // select the elements you want to show here

$('button').on('click', function(){
    var turn = alldivs.splice(0, 9);
    if (turn.length) {
        turn.fadeIn();
    }
});

当jQuery选择器返回具有匹配元素的数组时，您可以将其与

As the jQuery-selector returns an array with the matched elements you can combine that with the Array splice method to do what you want.

基本上alldivs.splice(0, 9)从alldivs的零位置开始删除九个项目，然后返回被删除的项目.

Basically alldivs.splice(0, 9) remove nine items starting at position zero from alldivs and returns the removed items.

希望有帮助.

这篇关于jQuery计算页面上的div数量并隐藏吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！