我想像这样将父项克隆到现有子项列表中:
Django
我能够做到这一点,但是它不像“理想输出”那样工作:
<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>
<li class="menu-item-11"><a href="#">item-11</a>
<ul class="sub-menu sup-01">
<li class="menu-item-22"> <a href="#">item-22</a></li>
<li class="has-child item-33"><a href="#">item-33</a>
<ul class="sub-menu sup-12">
<li class="item-44"><a href="#">item-44</a></li>
<li class="has-child item-55"><a href="#">item-55</a>
<ul class="sub-menu sup-23">
<li class="item-66"><a href="#">item-66</a></li>
<li class="item-77"><a href="#">item-77</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)
item-11
item-22
item-33
item-11(cloned)
item-44
item-55
item-22(cloned)
item-66
item-77
item-55(cloned)
and so on...
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'));
那么我如何使用jQuery将父级的值克隆给子级?看起来很容易,但是我被卡住了。