javascript - 如何循环遍历javascript数组并仅显示数组的一部分然后重复

Question

我很难理解这个问题。我有一个包含 150 个项目的数组。我只想一次显示 50 个。因此，我将在显示屏末尾有一个按钮，上面写着:“显示 51-100”。 OnSubmit 该按钮，javascript 代码显示 51-100。同上，接下来 50 个。非常感谢您的建议!

         for(var i = 0; i < myArray.length; i++ ){
     document.getElementById("comment" + i).innerHTML = commentBody; 

}

需要写入项目的 HTML:

    <div style="clear:both"> <br> </div>
    <div  id="flapBox13" class="flapBox">
      <p id='whenFlap13' class="mscFlapTime"></p> 
      <b  id='flapSum13' class="mscFlapSumBold"></b>    
      <p     id='flap13' class="mscFlapText"></p>            
    </div> 

Answer 1

假设您有一个包含 150 项的列表。让我们给它一个自然名称list。首先，我们将编写一个函数将一个列表分为多个列表:

function take(n, list) {
    return list.slice(0, n);
}

function drop(n, list) {
    return list.slice(n);
}

function concat(lists) {
    return Array.prototype.concat.apply(this, lists);
}

function divide(n, list) {
    if (list.length) {
        var head = take(n, list);
        var tail = drop(n, list);
        return concat.call([head], [divide(n, tail)]);
    } else return [];
}

现在我们将您的列表分为每页 50 个元素的页面:

var pages = paginate(50, list);

function paginate(n, list) {
    return divide(n, list).map(function (items, index) {
        var number = n * index;

        return {
            start: number + 1,
            end: number + items.length,
            items: items
        };
    });
}

现在让我们看一些 HTML:

<h2 id="pageHeader"></h2>
<ol id="pageItems"></ol>
<div id="pageButtons"></div>

既然已经解决了，让我们再编写一些 JavaScript:

var header = document.getElementById("pageHeader");
var items = document.getElementById("pageItems");

function displayPage(page) {
    header.innerHTML = "Items " + page.start + " to " + page.end + ":";

    items.start = page.start;

    items.innerHTML = "";

    appendChildren(items, page.items.map(function (item) {
        var li = document.createElement("li");
        li.innerHTML = item;
        return li;
    }));
}

function appendChildren(element, children) {
    children.forEach(function (child) {
        element.appendChild(child);
    });
}

我们将默认显示第一页:

displayPage(pages[0]);

接下来我们将创建一堆按钮:

var buttons = document.getElementById("pageButtons");

appendChildren(buttons, pages.map(function (page, index) {
    var button = document.createElement("button");
    button.addEventListener("click", display);
    button.innerHTML = index + 1;
    return button;

    function display() {
        displayPage(page);
    }
}));

这就是大家。亲自观看演示:http://jsfiddle.net/EHfn3/