你如何在 jQuery 中使用偏移量进行迭代？答案

【问题标题】：How do you iterate with an offset in jQuery?你如何在 jQuery 中使用偏移量进行迭代？
【发布时间】：2012-12-07 01:57:55
【问题描述】：

给定 HTML...

<ol>
    <li>The seventh</li>
    <li>8th</li>
    <li>(10-1)</li>
    <li>One</li>
    <li>2</li>
    <li>Trois</li>
</ol>
<ol>
    <li>Fourth</li>
    <li>5</li>
    <li>Number six</li>
</ol>

还有 JavaScript 代码...

$("li").each(function() {
    alert($(this).text());
});

我如何offset 迭代顺序，使其从元素<li>One</li> 开始并在元素<li>(10-1)</li> 结束？

Code sample available on jsfiddle.

【问题讨论】：

很难理解问题的上下文和本质。 jQuery 提供each 是为了方便，但编写循环通常很容易，除非您的具体情况有什么棘手的问题。另外，对拼出的数字进行排序是您问题的重要组成部分吗？
我们根本不排序！我正在寻找一个偏移量。
你一直在用那个词。 I do not think it means what you think it means。我猜你想让它在第n个li任意开始，然后循环回到顶部？
@Blazemonger 这就是我阅读它的方式。当您获取 jQuery 集合时，它会以 DOM 顺序返回。他想从任意索引开始迭代集合，但仍覆盖整个集合。
@Mathletics - 是的！我宣布你是我最好的新朋友。

标签： javascript jquery iteration each

【解决方案1】：

也许对你的情况没有更好的：

$.each(["one", "two", "three", "four", "five", ...], function(i, v) {
    var $this = $("li." + v);
    // ...
});

演示： http://jsfiddle.net/ZapyJ/2/

【讨论】：

"six", "seven", "eight".... 你的解决方案太具体了，不能扩展到更大的数字。

【解决方案2】：

您不能合理地期望 JavaScript 能够在没有大量额外工作的情况下智能地按数字顺序对英语数字进行排序。最好添加具有数字顺序的data- 属性，然后使用简单的for 循环提取这些属性。

HTML：

<ol>
    <li data-num="4">Four</li>
    <li data-num="5">Five</li>
    <li data-num="1">One</li>
    <li data-num="2">Two</li>
    <li data-num="3">Three</li>
</ol>

JS：

var max = $('li').length;
for (var i=1; i<max; i++) {
    var txt = $('li[data-num='+i+']').text();
    alert(txt);
};

http://jsfiddle.net/mblase75/ZapyJ/1/

【讨论】：

你是对的 - 它不会对英语数字进行排序，但你可以教它这样做 ;)
对已知的、有限数量的单词这样做是微不足道的。但是 OP 会在 8 点停止，还是可以想象到 22 点？将英语数字解析为整数是一个复杂而独特的问题。最好的解决方案是绕过它。
pfft，它可以达到一百万，同样的解决方案仍然有效，你只需要构造数组。
@Jamiec 这只是最字面意义上的解决方案。我们绝不能鼓励这种精神错乱。
提供一个表示字符串排序顺序的数组有什么疯狂之处？它们可以是英语数字，可以是动物物种或您希望为其确定排序顺序的任何基于语言的字符串。我已经无数次使用过这种技术，我看不出它有什么疯狂之处。诚然“百万”的评论有点陈词滥调，但这个概念是合理的 IMO。

【解决方案3】：

var arr = ['one', 'two', 'three', 'four', 'five']
$("li").sort(function(a, b) {
    return arr.indexOf(a.className) > arr.indexOf(b.className)
}).each(function() {
    console.log(this.className)
});

http://jsfiddle.net/r55BY/

【讨论】：

哎呀，又被揍了几秒。 +1 我想！
@Jamiec 这有点骇人听闻，但在这种情况下没有其他防弹逻辑。 +1

【解决方案4】：

添加sortOrder 数组，并调用.sort()：

var sortOrder = ['one','two','three','four','five'];

$("li").sort(function(a,b){ 
          return sortOrder.indexOf($(a).attr('class')) 
             - sortOrder.indexOf($(b).attr('class')); })
       .each(function() {
          alert($(this).attr("class"));
       });

现场示例：http://jsfiddle.net/XatzB/

【讨论】：

我其实更喜欢这个解决方案；为了可读性，我随意选择了类名，却没有意识到它们会提出一个新的解决方案！
@RichardJPLeGuen - 你想用什么来排序你的元素并不重要，重要的是你有一些标识符可以用来indexOf 到一个用于定义 sortOrder 的数组中

【解决方案5】：

不要使用诸如“一”、“二”和“三”之类的类将自己描绘成一个角落。相反，自动生成一个可排序的属性值，如data-order，它将以数字作为值：

<li data-order=7>Seven</li>
<li data-order=8>Eight</li>
<li data-order=1>One</li>

通过使用data-order 属性（随意命名），我们可以轻松地对集合中的这些项目进行排序，然后以它们的自然顺序迭代地修改它们：

$('li[data-order]').sort(sortByData).text(changeText);

function sortByData (one, two) {
    return $(one).data("order") - $(two).data("order");
}

function changeText (index, value) {
   return index + " " + value; 
}

演示：http://jsfiddle.net/2MYJ3/1/

【讨论】：

您的演示似乎没有达到您想要的效果。
@Blazemonger 实际上，它确实......它对你有什么用？
@Blazemonger 是的，集合在 JavaScript 中是从零开始的，所以第 7 项在索引 6 处，第 8 项在索引 7 处，第一项在索引 0 处。这就是为什么 @987654326 @ 返回 'foo'，而 ['foo'][1] 不返回。

【解决方案6】：

只需使用普通的 JavaScript 循环：

var $query = $("li");

var count = $query.length;
var offset = 2;
for(var i=0; i<count; i++) {
    var domEl = $query.get((i + offset)%count);
    //alert(domEl.getAttribute("class"));
    alert($(domEl).attr("class"));
}

Code on JsFiddle.

【讨论】：

这是我回答的更好版本。
@Mathletics - 我有点希望你没有删除答案；现在我必须记得两天后再来回答这个问题以接受我的回答。
未删除，但我认为你的答案更好。

【解决方案7】：

给你：

var $list = $("li");
    
for (var i=2, l = $list.length, len = l + 2; i < len; i++) {
    alert($list.eq(i % l).attr('class'));
}

在 jQuery 中重新排序集合并没有真正的好方法，但您可以使用集合长度和偏移量来生成任意循环。我将把它作为练习留给读者动态计算起始索引，我假设您需要这样做。

【讨论】：

【解决方案8】：

您可以创建自己的方法，这就是我的做法（我花了很长时间才弄清楚）

$.fn.offsetEach = function(offset, cb) {
  $(this.get().splice(offset).concat(this.get().splice(0,offset))).each(cb);
}

它的工作原理与 jQuery 的 each() 方法完全一样，除了添加了偏移参数

$("li").offsetEach(integer_offset, function(index, element) {
     // iterates through all elements, but starts with an offset index
});

偏移量是从零开始的，因此对于您的示例，您可以这样做以从 One 开始

$("li").offsetEach(3, function() {
     alert( $(this).text() );
});

FIDDLE

【讨论】：