Переместить LI на один уровень во вложенном UL с помощью JQuery

Question

Я хотел бы иметь возможность «переместить» узел DOM (LI) в контентном DIV на следующий самый высокий UL с помощью JQuery. Таким образом, в следующем ...

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

Я хотел бы быть в состоянии переместить пункт B до уровня к UL, содержащих пункты 1,2 и 3. Это текущий код, который не работает какой-либо причине (его все сочетания клавиш на основе, в зависимости от того, где находится курсор при выполнении, следовательно,() стратегия GetSelection):

выбрать текущий узел ...

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

«перемещение» текущий узел к второму родительскому UL ([0] является непосредственным UL, мы уже в пределах) ...

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

К сожалению, отчеты консоли эта ошибка ...

Uncaught TypeError:. $ (...) родители (...) [1] .append не является функцией

Что мне не хватает? У меня такое чувство, что я не понимаю разницу между объектом JQuery и элементом DOM, выбранным с помощью Javascript. Я должен был пошевелиться, чтобы выяснить, что $current_node нужно было обернуть в $(), чтобы иметь доступ к .parent(), но я думаю, что я все еще не могу найти что-то довольно простое. Благодаря!

Answer 1

Это рабочее решение. Надеюсь, поможет!

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

Я вывешиваю этот ответ, потому что я думаю, что это сердце вопроса я возникли проблемы с, что может быть несколько иной, чем это было истолковано/ответил выше.

//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"); 

Это был «проходящий» bewteen Javascript и JQuery. У меня возникли проблемы с пониманием.