Question

假设我有以下html结构 -

<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<a>more..</a>

我希望隐藏除页面加载前的第5个div之外的所有内容，然后点击more链接我想进一步显示5个div，依此类推，直到最后一个div。

如何使用jquery执行此操作？

Answer 1

我想你想要做的就是隐藏所有div，然后点击more每次显示5个下一个div。您可以在jsfiddle上试用。

HTML：

<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<a id="more">more..</a>

JS使用jQuery：

$(function() {
    $('div').hide();
    $('#more').click(function() {
        $('div:hidden').slice(0,5).show();
    });
});

Answer 2

尝试 -

$(document).ready(function() {

    $("div:gt(4)").hide();

    $("a").click(function() {
        if ($("div:hidden").length > 5) $("div:hidden:lt(5)").show();
        else $("div:hidden").show();
    })

})

演示 - http://jsfiddle.net/ipr101/dfL8q/1/

Answer 3

我假设您要做的是，在页面加载时，隐藏除前5个div之外的所有内容。然后，当单击“更多”链接时，再显示5个div，直到所有可见

我将如何做到这一点:(演示：http://jsfiddle.net/HC4KW/2/）

默认情况下，让所有div显示，并使用CSS隐藏“more”链接。这允许非js浏览器仍然可以看到您的内容
在准备好文档时，隐藏除前5个div之外的所有内容
```
$("div:gt(4)", container).hide();
```

显示您的“更多”链接，点击：

显示前5个隐藏的div

会隐藏“更多”链接

$('#more').show().click(function() {
    var hidden_divs = $("div:hidden", container);  /* list of hidden divs */
    if (hidden_divs.size() <= 5) {  /* No hidden divs left after we show 5 more*/
        $(this).hide();  /* hide "more" link */
    }
    hidden_divs.slice(0, 5).slideDown();  /* reveal first 5 hidden divs */
});

Answer 4

$(document).ready(function() {
$("div").hide()
$("div:lt(5)").show()

$("a").click(function() {
    $("div:hidden:lt(5)").show()
})

})

http://jsfiddle.net/KaPNa/1/

Answer 5

我不确定我的问题是否正确。

$(function() {
  $("div:gt(4)").hide();
  $("a").click(function(event) {
    $("div:hidden:lt(5)").show();
    event.preventDefault();
  });
});

演示：http://jsbin.com/uzovug/6

Answer 6

隐藏你可以做的五个要素：

$('button').click(function(){
    var div = $('div:visible').filter(function(i){
       if (i <5) return this;
    }).hide();    


});

在这里摆弄http://jsfiddle.net/sbpkR/

编辑 - 当然使用一个函数来隐藏它们在dom上：

var hide5 = function(){
        var div = $('div:visible').filter(function(i){
           if (i <5) return this;
        }).hide();    
};
$(document).ready(function(){
    hide5();
    $(a).click(hide5);
});

编辑2 - 我更新了小提琴http://jsfiddle.net/sbpkR/2/

$('div').hide();
$('div').filter(function(i){
       if (i <5) return this;
 }).show();     
$('button').click(function(){
    var divS = $('div:visible:last').nextAll().filter(function(i){
       if (i <5) return this;
   })    ;
        $('div').hide();
    divS.show();


});

编辑3 - http://jsfiddle.net/sbpkR/3/

$('div').hide();
$('div').filter(function(i){
       if (i <5) return this;
 }).show();     
$('button').click(function(){
    var divS = $('div:visible:last').nextAll().filter(function(i){
       if (i <5) return this;
   })    ;
    divS.show();


});

在页面加载时隐藏div的特定no

6 个答案: