如何反向遍历列表？

Question

我今天看到this question 并且好奇地提出了我自己的概念（或者可能是那个问题的 OP 概念），但我卡在这里，我如何在活动课程之后迭代列表并从头开始。让我们从下面的html中弄清楚：

<ul>
  <li name="6">one</li>
  <li name="1" class="active">two</li>
  <li name="2">three</li>
  <li name="3">four</li>
  <li name="4">five</li>
  <li name="5">six</li>
</ul>

现在，如果活动类在倒数第二个 li 中，则如下所示：

<ul>
  <li name="3">one</li>
  <li name="4">two</li>
  <li name="5">three</li>
  <li name="6">four</li>
  <li name="1" class="active">five</li>
  <li name="2">six</li>
</ul>

对于更长的列表，如下所示：

<ul>
  <li name="3">one</li>
  <li name="4">two</li>
  <li name="5">three</li>
  <li name="6">four</li>
  <li name="1" class="active">five</li>
  <li name="2">six</li>
  <li name="3">seven</li>
  <li name="4">eight</li>
  <li name="5">nine</li>
  <li name="6">ten</li>
  <li name="1">eleven</li>
  <li name="2">tweleve</li>
</ul>

我的意思是我想这样做：

• 从活动类开始，它应该从 1 开始，然后增加 1 用于下一个 兄弟姐妹
• 从活动类开始，它应该从 1 开始并减少 1 上一个兄弟姐妹（意思是 6、5、4...）

我所做的是：

$('li').attr('name',function(i){
  i += 5
    return i % 6 + 1;
});

但是如果活动类在第二个列表中，结果会很好。那么如果我不知道活动课程在哪里，我该怎么办呢？

Answer 1

这是一个很好的方法... ;)

var stopvalue = 6;
var activeindex = $('li.active').index() % stopvalue ;
$('ul>li').attr('name', function (i) {
    return (i + (stopvalue - activeindex)) % stopvalue  + 1;
});

demo

Answer 2

检查这个 Demo Fiddle ，使用 .nextAll() 和 .prevAll()

var activeVal = $( "li.active" ).attr('name');

$( "li.active" ).nextAll().each(function(i){
        $(this).attr('name',function(){
        return i + parseInt(activeVal) + 1;
    });    
}).end().prevAll().each(function(i){
    $(this).attr('name',function(){
        return i +parseInt(activeVal)+1;
    });    
});

---

评论：

• 第一个循环 - .nextAll()。迭代表单直到最后一个元素。
• 第二个循环 - .prevAll()。从上一个迭代到第一个。

要检查迭代，请在控制台中验证：

$('li').each(function(){
   console.log($(this).attr('name')); 
});

---