0

我一直试图限制一次在 div 中显示的数组项的数量。请帮忙。

这就是问题所在。我有一个 div：

<div id="site_list">
    <a href="#" id="0">Site 0</a>
    <a href="#" id="1"> Site 1</a>
    <a href="#" id="2"> Site 2</a>
    <a href="#" id="3"> Site 3</a>
    <a href="#" id="4"> Site 4</a>
    <a href="#" id="5"> Site 5</a>
    <a href="#" id="6"> Site 6</a>
    <a href="#" id="7">Site 7</a>
    <a href="#" id="8"> Site 8</a>
    <a href="#" id="9""> Site 9</a>
    <a href="#" id="10"> Site 10</a>
</div>

上一个按钮

<button id="previous"> << Previous</button>

下一步按钮

<button id="next"> Next >> </button>

----- 链接数组--------

var link_array=$('#site_list a');

“site_list” div 中的链接可以动态更新，我希望一次只能显示 5 个链接，这样当单击“下一步”按钮时，将在之前显示的内容的位置再显示五个链接或如果剩余链接不超过五个，则显示剩余隐藏链接数量，如果前面没有链接，则隐藏“下一步”按钮。单击“上一个”按钮时应该执行相同的过程，但在这种情况下，将显示以前的链接。

请，我会感谢你的帮助。

4

2 回答 2

4

Here is a flexible way to do, change current_range to choose your starting point and change per_page to display more or less result per page.

Here is a working demo

var current_range = 0;
var per_page = 5;
$('button').on('click', function () {
    if ($(this).is('#next')) {
        if (current_range <= $('#site_list a').length) current_range += per_page;
    } else if($(this).is('#previous')) {
        if (current_range > 0) current_range -= per_page;
    }
    change_view();
});

function change_view() {
    $('#site_list a').hide();
    $($('#site_list a').splice(current_range, per_page)).show();
}
change_view();
于 2013-06-08T10:33:01.090 回答
0

我猜你需要这样的东西：

$("#previous").on("click", "", function(event) {
  $("#site_list a:gt(5)").hide();
  $("#site_list a:lt(6)").show();
});

$("#next").on("click", "", function(event) {
  $("#site_list a:gt(5)").show();
  $("#site_list a:lt(6)").hide();
});

这基本上会在前 5 个链接和后 5 个链接之间切换。另外，如果你给出更清楚的解释——我将能够准备一份 jsfiddle 草案，但只是不确定我的答案是否真的是你所需要的。

于 2013-06-08T10:19:25.950 回答