Wie kann man li Elemente in nur einer Liste verschieben?

Question

Ich habe eine multiple ul und in jeder ul gibt es mehrere li. Jedes Mal, wenn jemand auf den li-Eintrag klickt, wird er ausgewählt, und dann gibt es nach oben und nach unten gerichtete Knöpfe, die die ausgewählten li-Gegenstände nach oben und unten bewegen. Unten ist Jquery Code der Tasten

//onclick of move up button ,move the item up in the list 
$("#btn-move-up").click(function() { 
    $item = $(".highlight"); 
    $before = $item.first().prev(); 
    $item.insertBefore($before); 
}); 

//onclick of move down button, move the item down in the list 
$("#btn-move-down").click(function() { 
    $item = $(".highlight"); 
    $after = $item.last().next(); 
    $item.insertAfter($after); 
}); 

Was ich will, ist zu erlauben, dass li Artikel in der entsprechenden Liste bewegt nur. z.B. wenn es zwei Listen sind

<ul id="1"> 
<li>item 1 </li> 
<li>item 2 </li> 
<li>item 3</li> 
</ul> 

<ul id="2"> 
<li>item 1</li> 
<li>item 2</li> 
<li>item 3</li> 
</ul> 

, wenn jemand auf Punkt 2 des ersten Liste klickt und Artikel 3 der zweiten Liste und klicken Sie auf aufrücken ich sie nur in ihrer angesehenen Liste verschieben will und will nicht die li Elemente, die in der anderen Liste kopiert und dann nach oben verschoben werden sollen, wie es jetzt geschieht. Irgendeine Idee, wie dies erreicht werden kann?

Answer 1

Lassen Sie uns Ihren Code brechen:

$item = $(".highlight"); 

bekommt alle highglighted Artikel

$before = $item.first().prev(); 

.First die erste bekommt (li s nur annehmen) und dann die li darüber

$item.insertBefore($before); 

dauert alle die Elemente und setzt sie auf die zuvor

Da $item ist eine Sammlung/Array von Elementen (weshalb Sie .first) alle Aktionen für das gesamte Array gelten.

Sie können die letzte Zeile ändern:

$item.first().insertBefore($before); 

aber dann nur eine zu einem Zeitpunkt nach oben bewegen.

Alternativ Arbeit an einem Element zu einem Zeitpunkt, zB:

$("#btn-move-up").click(function() { 
    $items = $(".highlight"); 
    $items.each(function(index) { 
     $before = $(this).prev(); 
     $(this).insertBefore($before); 
    }); 
}); 

Answer 2

auf das, was Sie uns sagen, geben diese versuchen, eine

//onclick of move up button ,move the item up in the list 
$("#btn-move-up").click(function() { 
    $(".highlight").each(function() 
    { 
     $item = $(this); 
     $before = $item.first().prev(); 
     $item.insertBefore($before); 
    }) 
}); 

//onclick of move down button, move the item down in the list 
$("#btn-move-down").click(function() { 
    $(".highlight").each(function() 
    { 
     $item = $(this); 
     $after = $item.last().next(); 
     $item.insertAfter($after); 
    }) 
});