使用 JQuery 在嵌套 UL 中将 LI 上移一级答案

【问题标题】：Move LI up one level in nested UL using JQuery使用 JQuery 在嵌套 UL 中将 LI 上移一级
【发布时间】：2017-04-10 18:02:26
【问题描述】：

我希望能够使用 Jquery 将内容可编辑 DIV 中的 DOM 节点（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 上移到包含项目 1、2 和 3 的 UL。这是当前代码无论出于何种原因都不起作用（它全部基于键盘快捷键，具体取决于光标所在的位置，因此 getSelection() 策略）：

选择当前节点...

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

将当前节点“移动”到第二个父 UL（[0] 是我们已经在其中的直接 UL）...

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

很遗憾，控制台报这个错误...

未捕获的类型错误：$(...).parents(...)[1].append 不是函数

我错过了什么？我有一种感觉，我不理解 JQuery 对象和使用 Javascript 选择的 DOM 元素之间的区别。我不得不绞尽脑汁想知道$current_node 需要被包裹在$() 中才能访问.parent()，但我认为仍然没有完成一些非常基本的事情。谢谢！

【问题讨论】：

编辑：我误读了 HTML 结构，item 3 和 li 是否包含 ul ？
[#] 将一个元素从包含它的 jQuery 对象中分离出来。 append 是一个 jQuery 函数，您不再对其进行操作。在这种情况下使用 eq(#) 而不是 [#] 将其保留为 jQuery 对象。这就是您的未捕获类型错误的原因。这可能不是你的全部问题。
我知道它看起来很奇怪@HenryDev，但对于嵌套的 UL 列表来说，结构是准确的。签出：w3schools.com/tags/tryit.asp?filename=tryhtml_lists2
@Taplar eq(#) 确实摆脱了 TypeError...但仍然无法正常工作。
@Hank 我已经发布了我的解决方案，将“项目 B”提升了一级。希望对你有帮助

标签： jquery list nested append parent

【解决方案1】：

这是一个可行的解决方案。希望对您有所帮助！

$(document).ready(function(){
	var elementToBeMoved = $("ul  > li:eq(4)");
	$("ul").append(elementToBeMoved);
	$("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>

【讨论】：

这个想法是处于嵌套 UL 的任何级别，并且能够将 LI 向上“移动”一个级别，而不管树有多深。这似乎将 LI 复制到所有 UL，然后将其从不需要的位置删除。 12 个级别可能会变得不守规矩，需要管理索引计数等。JQuery 文档说 您还可以选择页面上的一个元素并将其插入另一个...如果 ...插入到 DOM 中其他地方的单个位置，它将被移动到似乎更合适的目标（未克隆）。我的问题是让append() 可以使用，但是我正在选择父节点。
谢谢。显然我太卑微了，还不能投票！同样的问题......为什么append() 不接受document.getSelection().anchorNode.parentElement？
成功了！我想我并没有我想象的那么糟糕。
@Hank 一个好的建议是始终自己进行大量阅读。这就是大多数开发人员的学习方式。迄今为止关于 Javascript 的最佳来源是：developer.mozilla.org/en/docs/Web/JavaScript

【解决方案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");

这是我无法理解的 Javascript 和 JQuery 之间的“过渡”。

【讨论】：