Verschieben Sie LI um eine Ebene in verschachtelten UL mit JQuery

Question

Ich möchte in der Lage sein, einen DOM-Knoten (ein LI) in einem Contenteditable DIV mit Jquery auf die nächst höhere UL "verschieben". So in den folgenden ...

<ul> 
<li>item 1</li> 
<li>item 2</li> 
<li>item 3 
<ul> 
<li>item A</li> 
<li>item B</li> 
<li>item C</li> 
</ul> 
</li> 
</ul> 

Ich möchte in der Lage sein, Artikel B zu bewegen, um ein Level zu dem UL enthält Artikel 1,2 und 3. Dies ist der aktuelle Code, der nicht für funktioniert welchem ​​Grund auch immer (alle seine Tastenkombination basiert, je nachdem, wo sich der Cursor bei der Ausführung ist, daher der getSelection() -Strategie):

den aktuellen Knoten wählen ...

var $current_node = document.getSelection().anchorNode.parentElement; 

„move“ den aktuellen Knoten zum zweiten Elternteil UL ([0] ist der unmittelbare UL, in dem wir bereits sind) ...

$($current_node).parents("ul")[1].append($current_node); 

Leider sind die Konsole meldet diesen Fehler ...

Uncaught Typeerror:. $ (...) Eltern (...) [1] .append ist keine Funktion

Was fehlt mir? Ich habe das Gefühl, dass ich den Unterschied zwischen einem JQuery-Objekt und einem mit Javascript ausgewählten DOM-Element nicht verstehe. Ich musste mir den Kopf zerbrechen, um herauszufinden, dass $current_node in $() verpackt werden musste, um Zugriff auf .parent() zu haben, aber ich denke, dass ich immer noch auf etwas ziemlich Grundlegendem bin. Vielen Dank!

Answer 1

Hier ist eine funktionierende Lösung. Ich hoffe es hilft!

$(document).ready(function(){ 
 
\t var elementToBeMoved = $("ul > li:eq(4)"); 
 
\t $("ul").append(elementToBeMoved); 
 
\t $("ul > li:eq(5)").remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3 
 
    <ul> 
 
    <li>item A</li> 
 
    <li>item B</li> 
 
    <li>item C</li> 
 
    </ul> 
 
    </li> 
 
    </ul>

Answer 2

Ich poste diese Antwort, weil ich denke, das ist der Kern des Problems ist, ich war mit Schwierigkeiten haben, die etwas anders sein kann, als es wurde oben interpretiert/beantwortet.

//select the node using a javascript function getSelection()... 
var current_node = document.getSelection().anchorNode.parentElement; //node of current line's parent` 

//test the var 
console.log(typeof current_node); // IS javascript object 
console.log(current_node instanceof $); //IS NOT a JQuery object 

// by wrapping the var in $(), it can be operated on by JQuery functions, effects, etc... 
console.log($(current_node) instanceof $); IS a JQuery object 
$(current_node).fadeOut("slow"); 

Es war die "nebenbei" bewteen Javascript und JQuery Ich hatte Schwierigkeiten Verständnis haben.