如何使用jQuery向孩子克隆父母的价值?

时间:2020-07-01 17:51:28

标签: jquery

我想像这样将父项克隆到现有子项列表中:

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将父级的值克隆给子级?看起来很容易,但是我被卡住了。

0 个答案:

没有答案