Question

我有这个标记：

<ul>
  <li id="step1">Item1<a id="button1">Move down</a></li>
  <li id="step2">Item2<a id="butto2">Move down</a></li>
  <li id="step3">Item3<a id="button3">Move down</a></li>
</ul>

我想设置一个click（）事件，它将li元素移动到下一个元素的位置。

我可以通过这样做来检索项目的jQuery索引：

$("li#step1").index()

我希望能够增加或递减它（2乘2）。我试图改变它：

$("li#etape1").index($("li#etape1").index() + 2)

但它似乎并没有起作用（每当我在Chrome控制台中执行此操作时，我得到-1）。我怎么能这样做？

Answer 1

使用eq()

$('li').click(function(){
var index= $(this).index();
$(this).insertAfter($(this).parent().find("li").eq(index+1));
});

https://jsfiddle.net/ze471vun/

或：

$('li').click(function(){
var index= $(this).index();
$(this).insertAfter($(this).next());
});

Answer 2

要将您的li缩小2位，请使用index()

尝试以下代码段

代码段：

＆＃13;

$(function() {
  $("a").click(function() {
    var presentLi = $(this).closest("li"),
    targetLi = presentLi.closest("ul").children(":eq(" + (presentLi.index() + 2) + ")");
    targetLi.after(presentLi);
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
  <li id="step1">Item1 <a id="button1" href="#">Move down</a>
  </li>
  <li id="step2">Item2 <a id="button2" href="#">Move down</a>
  </li>
  <li id="step3">Item3 <a id="button3" href="#">Move down</a>
  </li>
  <li id="step4">Item4 <a id="button4" href="#">Move down</a>
  </li>
  <li id="step5">Item5 <a id="button5" href="#">Move down</a>
  </li>
  <li id="step6">Item6 <a id="button6" href="#">Move down</a>
  </li>
  <li id="step7">Item7 <a id="button7" href="#">Move down</a>
  </li>
  <li id="step8">Item8 <a id="button8" href="#">Move down</a>
  </li>
</ul>

＆＃13;

如果这不是您的要求，请告诉我。

Answer 3

您无法直接更改索引编号。此外，在行中移动下一个元素前面的元素不会使索引编号增加2。

元素的索引号表示其在数组中的位置，与驱动程序在竞赛中的位置相同。当一名车手接管另一名车手时，他取代了他的位置，而较慢的车手位置下降。同样，向前移动一个数组元素的行为将另一个元素向后移动（保留元素的总数）。没有两个元素可以共享索引，并且没有元素的索引可以大于数组中元素的总数。（更确切地说，它大于或等于因为指数从零开始）。

但是，您可以操纵元素的排序。使用jQuery执行此操作的简单方法是.before()和.after()函数。或者， .insertBefore（）和 .insertAfter（）函数提供相同的功能，但通常更具可读性和直观性。

在其直接兄弟之后移动元素的函数可能如下所示：

function moveElementDown(elementSelector){
     var element = $(elementSelector);
     element.insertAfter(element.next());
}

如果你想要另一个功能来移回一个元素，你可以这样做：

function moveElementUp(elementSelector){
     var element = $(elementSelector);
     element.insertBefore(element.prev());
}

如果你真的需要将一个元素移动一定数量的空格，那么像这样的通用函数会这样做：

function moveElement(elementSelector, numOfSpaces){
     if(numOfSpaces=== 0)
         return;
     var element = $(elementSelector);
     var siblings = element.parent().children();
     var targetIndex = Math.max(0,Math.min(element.index() + numOfSpaces, siblings.length-1));

     if(targetIndex === element.index())
         return;
     if(targetIndex === 0)
         element.parent().prepend(element);
     else if(targetIndex === siblings.length-1)
         element.parent().append(element);
     else if (numOfSpaces> 0)
         element.insertBefore(siblings[targetIndex+1]);
     else
         element.insertAfter(siblings[targetIndex-1]);
}

使用jQuery更改index（）值

3 个答案: