Javascript-创建一个以30步为增量的for循环

Javascript - Creating a for loop with increments of 30 steps

本文关键字：for 循环 创建 一个以 30步 Javascript-      更新时间：2023-09-26

我正在尝试创建一个以30步为增量的for-loop。这样做的目的是希望在不使用任何插件的情况下将其用于非常简单和原始的分页。

首先我有一个无序的HTML列表：

<ul id="pagination"></ul>

这是我用来填充列表和设置元素属性的代码。为了这个问题，使用了data-skip和data-top，但实际上它们稍后将添加到url中，以便REST调用获取数据。

var total = 115;
var intervalo = Math.ceil(total / 30);
var pagination = document.getElementById('pagination');
for (var c = 1; c <= intervalo; c++) {
    var top = c * 30;
    var skip = (c * 30) - 30;
    console.log('&$skip=' + skip + ' &$top=' + top);
    var li = document.createElement('li');
        li.id = c;
        li.setAttribute('data-skip', '&$skip=' + skip);
        li.setAttribute('data-top', '&$top=' + top);
    var a = document.createElement('a');
        a.href = '#';
        a.textContent = c;
        li.appendChild(a);
        pagination.appendChild(li);
 }

上面的代码在控制台中返回：

&$skip=0 &$top=30
&$skip=30 &$top=60
&$skip=60 &$top=90
&$skip=90 &$top=120

但这就是问题所在。如果您注意到&$skip始终与以前的&$top匹配。事实上，我需要的是返回类似的东西：

&$skip=0 &$top=30
&$skip=31 &$top=60
&$skip=61 &$top=90
&$skip=91 &$top=120

我怎样才能做到这一点？我觉得我快到了，但我做得不对。如果需要任何其他细节，请让我知道谢谢！

只增加30而不是c++:

for (var c = 1; c <= total; c+=30)

我想我想通了。这可能不是最好的选择，但目前对我来说有效。希望能帮助别人，甚至有人能提供比我更好的答案。我创建了一个数组，然后进行操作。

var total = 115;
var intervalo = Math.ceil(total / 30);
var pagination = document.getElementById('pagination');
var range = [];
for (var c = 1; c <= intervalo; c++) {
  var top = c * 30;
  var skip = (c * 30) - 30;
   range.push({  
        skip: skip,
        top: top
   });
  // console.log('&$skip=' + skip + ' &$top=' + top);
 var li = document.createElement('li');
     li.id = c;
     li.setAttribute('data-skip', '&$skip=' + skip);
     li.setAttribute('data-top', '&$top=' + top);
 var a = document.createElement('a');
     a.href = '#';
     a.textContent = c;
  li.appendChild(a);
  pagination.appendChild(li);
  }
 console.log(JSON.stringify(range));
 for (var r = 1; r < range.length; r++) {
     range[r].top = range[r].top - 1;
 }
 console.log(JSON.stringify(range));
相关文章：