使用jquery将父项目克隆到子列表中
使用jquery将父项目克隆到子列表中
提问于 2020-06-23 04:23:25
我想将父项目克隆到现有的子列表中，如下所示：
<ul id="menu-12" >
<li class="menu-item-1"><a href="#">item-1</a>
<ul class="sub-menu sup-0">
<li class="menu-item-2"> <a href="#">item-2</a></li>
<li class="has-child item-3"><a href="#">item-3</a>
<ul class="sub-menu sup-1">
<li class="item-4"><a href="#">item-4</a></li>
<li class="has-child item-5"><a href="#">item-5</a>
<ul class="sub-menu sup-2">
<li class="item-6"><a href="#">item-6</a></li>
<li class="item-7"><a href="#">item-7</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Ideal output:
item-1
item-2
item-3
item-1(cloned)
item-4
item-5
item-2(cloned)
item-6
item-7
item-5(cloned)如果更多，依此类推。JSFiddle
http://jsfiddle.net/gillyspy/XM4ez/ <-我找到了类似的东西，但它的工作方式不像我的“理想输出”
回答 1
Stack Overflow用户
发布于 2020-06-23 06:01:27
JavaScript Solution -
假设您只想克隆<a>标记元素。
function foo(element, parentA = null) {
if (!element) return;
const ul = element.querySelector(':scope > li > ul'); // inner ul element
if (!ul) return;
const parentList = ul.parentNode; // parent li of ul
const a = parentList.querySelector(':scope > a');
if (parentA) parentList.insertBefore(parentA, ul);
const clonedA = a.cloneNode(true); // cloning element
return foo(ul, clonedA);
}
// pass the reference of first ul element as an argumnent
foo(document.getElementById('menu-12'));<ul id="menu-12">
<li class="menu-item-1">
<a href="#">item-1</a>
<ul class="sub-menu sup-0">
<li class="menu-item-2">
<a href="#">item-2</a>
</li>
<li class="has-child item-3">
<a href="#">item-3</a>
<ul class="sub-menu sup-1">
<li class="item-4"><a href="#">item-4</a></li>
<li class="has-child item-5"><a href="#">item-5</a>
<ul class="sub-menu sup-2">
<li class="item-6"><a href="#">item-6</a></li>
<li class="item-7"><a href="#">item-7</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62522892
复制相关文章
相似问题
腾讯云开发者
