JQuery, перемещение детей()

Question

Использование функции JQuery .children() Я выбрал 3 элемента на странице. Я хочу выполнить стабильную реорганизацию на этих элементах, чтобы они сохраняли свой порядок, но желаемый элемент поднимается вверх. Ниже приведен пример:

У меня есть элементы:

• Б
• С
• D

Я хочу С быть повышен до верхней части:

• С
• D
• Б

Код я написал для это предполагает, что все элементы имеют уникальные идентификаторы и что можно предусмотреть, что целевой идентификатор для выполнения на велосипеде или повторно -организация элементов:

function (parent, targetID) { 
     var feedEntries = $(parent).children(".items"); 
     //reorder entries so that the first entry is the top entry 
     while (targetID != feedEntries.first().attr('id')) { 
      feedEntries.first().insertAfter(feedEntries.last()); 
     } 
    } 

у меня есть проблема, даже хотя в теории это должно работать, это сбой моей страницы. Любая помощь в решении этой проблемы была бы весьма признательна.

Answer 1

Вам не нужен цикл. .prepend() поместит элемент (или набор элементов) в начало родителя. И вы можете использовать .slice(), чтобы получить все дети, начиная с определенного индекса.

$("#button").click(function() { 
 
    move('#list', 'c'); 
 
}); 
 

 
function move(parent, targetID) { 
 
    var index = $("#" + targetID).index(); 
 
    var itemsToMove = $(parent).children().slice(index); 
 
    $(parent).prepend(itemsToMove); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ol id='list'> 
 
    <li id='a'>A</li> 
 
    <li id='b'>B</li> 
 
    <li id='c'>C</li> 
 
    <li id='d'>D</li> 
 
</ol> 
 
<br> 
 
<button id="button">Click to move</button>