Question

我一直试图限制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个链接，这样当点击“下一步”按钮时，将会在之前的位置显示另外五个链接显示内容或如果其余链接不是最多五个，则将显示隐藏的剩余链接数，如果前面没有链接，则将隐藏“下一个”按钮。当单击“上一个”按钮时，应该发生相同的过程，但在这种情况下，将显示先前的链接。

拜托，我将非常感谢您的协助。

Answer 1

以下是一种灵活的方法，更改current_range以选择您的起点并更改per_page以显示每页更多或更少的结果。

这是 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();

Answer 2

我猜你需要这样的东西：

$("#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，但只是不确定我的答案是否真的是你需要的。

如何从jquery中的数组中获取大量项目

2 个答案: