2

给定 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());
});​

如何偏移迭代顺序，使其从 element 开始<li>One</li>并在 element 结束<li>(10-1)</li>？

jsfiddle 上提供的代码示例。

4

8 回答 8

5

对于您的情况，也许没有比这更好的了：

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

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

于 2012-12-19T16:50:51.990 回答
4

你不能合理地期望 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/

于 2012-12-19T16:51:01.250 回答
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/

于 2012-12-19T16:52:32.213 回答
3

添加一个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/

于 2012-12-19T16:52:53.663 回答
2

干得好：

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

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

于 2012-12-19T17:36:07.833 回答
1

只需使用普通的 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"));
}

JsFiddle 上的代码。

于 2012-12-19T17:29:30.307 回答
0

不要使用诸如“一”、“二”和“三”之类的类将自己描绘成一个角落。相反，自动生成一个可排序的属性值，如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/ ​</p>

于 2012-12-19T17:05:48.510 回答
0

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

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

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

$("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() );
});

小提琴

于 2014-01-30T22:28:31.310 回答