Given 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>​

And JavaScript code...

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

How can I offset the iteration order so that it starts on element <li>One</li> and ends on element <li>(10-1)</li>?

Code sample available on jsfiddle.

Given 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>​

And JavaScript code...

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

How can I offset the iteration order so that it starts on element <li>One</li> and ends on element <li>(10-1)</li>?

Code sample available on jsfiddle.

• javascript
• jquery
• iteration
• each

• 1 It is hard to understand the context and essence of the question. jQuery provides each as a convenience, but writing a loop is usually easy unless there is something tricky about your specific situation. Also, is sorting spelled out numbers an essential part of your problem? – Aaron Kurtzhals Commented Dec 19, 2012 at 16:55
• We're not sorting at all! I'm looking for an offset. – Richard JP Le Guen Commented Dec 19, 2012 at 17:08
• You keep using that word. I do not think it means what you think it means. I suppose that you want it to arbitrarily start on the nth li and then loop back to the top? – Blazemonger Commented Dec 19, 2012 at 17:10
• 2 @Blazemonger That's the way I read it. When you fetch the jQuery collection, it es back in DOM order. He'd like to iterate over the collection starting at an arbitrary index but still covering the whole set. – Evan Davis Commented Dec 19, 2012 at 17:12
• @Mathletics - Yes! I declare you my new best friend. – Richard JP Le Guen Commented Dec 19, 2012 at 17:19

8 Answers 8

Maybe nothing better for your case:

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

DEMO: http://jsfiddle/ZapyJ/2/

You can't reasonably expect JavaScript to intelligently sort English-language numbers in numerical order without a lot of extra work. Far better to add a data- attribute with a numerical order, and then extract those with a simple for loop.

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/mblase75/ZapyJ/1/

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

The addition of a sortOrder array, and a call to .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"));
       });

Live example: http://jsfiddle/XatzB/

Here you go:

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

There isn't really a nice way to reorder a collection in jQuery, but you can use the collection length and offset to generate an arbitrary loop. I'll leave it as an exercise for the reader to figure out the starting index dynamically, which I assume you'd need to do.

Just use a normal JavaScript loop:

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.

Don't paint yourself into a corner using classes like "one", "two", and "three". Rather, auto-generate a sortable attribute value like data-order, which will have digits as values:

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

By using the data-order attribute (name it whatever you like), we can easily sort these items in a collection and then iteratively modify them in their natural 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; 
}

Demo: http://jsfiddle/2MYJ3/1/ ​

You can create your own method, here's how I'd do it (and it took me quite some time to figure out)

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

and it works exactly like jQuery's each() method, except for the added offset parameter

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

The offset is zero based, so for your example you would do it like this to start with One

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

FIDDLE