使用JQuery將LI上移到嵌套UL中的一個級別

我希望能夠使用Jquery將可持續使用的DIV中的DOM節點（LI）「移動」到下一個最高UL。所以在下面......使用JQuery將LI上移到嵌套UL中的一個級別

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

不幸的是，控制檯報告這個錯誤...

遺漏的類型錯誤：$（...）父母（...）[1] .append不是一個函數

我錯過了什麼？我有一種感覺，我不理解JQuery對象和使用Javascript選擇的DOM元素之間的區別。我不得不揣摩$current_node需要包裝$()有權訪問.parent()，但我認爲我仍然在一些非常基本的東西。謝謝！

來源

2016-11-26 Hank

編輯：我錯誤的HTML結構，是'項目3'和'li'包含'ul'？ – Stefan

[＃]將元素從包含它的jQuery對象中分離出來。 append是一個jQuery函數，您不再使用它。在這種情況下使用eq（＃）而不是[＃]將其保留爲jQuery對象。這是你的Uncaught TypeError的原因。這可能不是你所有的問題。 – Taplar

我知道它看起來更奇怪@HenryDev，但結構對於嵌套的UL列表是準確的。查看：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists2 – Hank

這是一個工作解決方案。希望能幫助到你！

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

來源

2016-11-26 20:08:44 HenryDev

這個想法雖然是嵌套UL的任何級別，並且能夠將LI「上移」到一個級別，而不管樹有多深。這似乎將LI複製到所有UL，然後將其從不合需要的位置刪除。可以得到12個級別的索引計數管理等不守規矩jQuery文檔說_您也可以選擇頁面上的元素，並將其插入到另一個...如果...插入DOM中其他地方的單個位置，它會進入目標（不克隆）_這似乎更合適。我的問題是讓'append（）'工作，但是我選擇了父節點。 – Hank

@Hank我更新了我的答案，使用append。 – HenryDev

謝謝。顯然我太投票了！同樣的問題雖然...爲什麼'append（）'不會接受'document.getSelection（）。anchorNode。parentElement'？ – Hank

，因爲我覺得這是我遇到的麻煩問題，比它被解釋/上述回答可能會稍有不同的心臟我張貼這個答案。

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

這是Javascript和JQuery的「傳球」，我很難理解。

來源

2016-11-28 03:48:18 Hank

使用JQuery將LI上移到嵌套UL中的一個級別

回答

相關問題