Question

我有一个动态页面，其中有一个名为'divWiz'的父div，我必须执行以下操作：

计算'divWiz'内的总div，并隐藏其中的50％。例如：如果我在divwiz中有50个子div，我想显示25并隐藏其余部分。
在25个div的末尾，会出现两个链接，显示“Show Next”和“Show All”。

如果用户点击“显示下一个”链接，则应隐藏前25个，然后显示下25个。 “显示下一个”链接现在应该是隐身的。

如果用户点击“全部显示”，则所有div都应该可见。一旦用户单击“全部显示”，这两个链接都将消失。

我该怎么做？由于这涉及到大量的遍历，我正在寻找具有性能的jquery代码。

Answer 1

以下是一些可以帮助您入门的提示：

$('#divWiz > div')会在“divWiz”中为您提供所有DIV。
$(something).length是所选元素的数量。
$(something).slice(start, end)可让您对所选元素的子集进行操作。

你应该能够把它们放在一起做你想做的事。

Answer 2

您需要做的就是拥有显示/隐藏firstHalf，secondHalf或两者的onclick处理程序。

var divCount   = $('#divWiz>div').length;
var firstHalf  = $('#divWiz>div').slice(0,divCount/2);
var secondHalf = $('#divWiz>div').slice(divCount/2);

Answer 3

jQuery不会为您提供更多性能，它将为您提供更简单的实现方式。如果你需要更好的表现，将25个div的“包”包装成普通父母并显示/隐藏那些父母（应该快25倍）

Answer 4

您可以使用索引号：

$('#divWiz > div:lt(25)')          // all divs of index 0 to 24

$('#divWiz > div:lt(50):gt(24)')  // all divs of index 25 to 49

小心！ :gt(-1)不起作用！

所以，这是一个快速而肮脏的完整工作示例，其中包含您所描述的内容：

HTML：

<input value=" Next " type="button"/>
<input value=" Prev " type="button"/>
<input value=" Show All " type="button"/>
<div id="divWiz"></div>

JS：

$(function() {
    var i, cutoff, total = 50;
    for(i=0; i<total; ++i)
        $(document.createElement("div")).html(i).appendTo("#divWiz");

    cutoff = total/2;

    $("#divWiz > div").hide();
    $("#divWiz > div:lt("+cutoff+")").show();

    $("input[value=' Next ']").click(function() {       
        $("#divWiz > div").hide();        
        $("#divWiz > div:gt("+(cutoff - 1)+")").show();
    });

    $("input[value=' Prev ']").click(function() {       
        $("#divWiz > div").hide();        
        $("#divWiz > div:lt("+cutoff+")").show();    });    

    $("input[value=' Show All ']").click(function() {       
        $("#divWiz > div").show();        
    });        
});

统计Divs并隐藏一些

4 个答案:

Try it out with this jsFiddle