Изменение индекса() с JQuery

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> 

Я хочу установить клик() событие, которое будет перемещать элемент 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 posiition, попробуйте следующие фрагменты кода, с помощью index()

Фрагменты кода:

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

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

Дай мне знать, если это не ваше требование.

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]); 
}