JQuery, Neupositionierung von Kindern()

Question

Verwenden der JQuery-Funktion .children() Ich habe 3 Elemente auf der Seite ausgewählt. Ich möchte eine stabile Neuorganisation dieser Elemente durchführen, so dass sie ihre Reihenfolge beibehalten, aber das gewünschte Element wird an die Spitze gehoben. Hier ein Beispiel:

I haben Elemente:

• A
• B
• C
• D

Ich möchte C nach oben angehoben werden:

• C
• D
• A
• B

Der Code I für diese geschrieben wird davon ausgegangen, dass alle Elemente haben einzigartige IDs und dass man dieses Ziel-ID liefern kann das Radfahren oder Re auszuführen -organizing der Elemente:

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

Das Problem, das ich haben wird, obwohl in der Theorie sollte dies umgehen, ist es meine Seite abstürzt. Jede Hilfe bei der Lösung dieses Problems würde sehr geschätzt werden.

Answer 1

Sie benötigen keine Schleife. .prepend() wird ein Element (oder eine Sammlung von Elementen) am Anfang des übergeordneten Elements einfügen. Und Sie können .slice() verwenden, um alle untergeordneten Elemente ab einem bestimmten Index abzurufen.

$("#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>