Question

鉴于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

Answer 1

对你的案子来说也许没什么好处的：

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

DEMO： http://jsfiddle.net/ZapyJ/2/

Answer 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/

Answer 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/

Answer 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/

Answer 5

你走了：

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

在jQuery中重新排序集合并不是一个很好的方法，但您可以使用集合长度和偏移量来生成任意循环。我将把它作为练习让读者动态地找出起始索引，我认为你需要这样做。

Answer 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

Answer 7

不要使用“one”，“two”和“three”等类将自己画到角落里。而是自动生成一个可排序的属性值，如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/

Answer 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

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

8 个答案: