克隆每个元素追加下一个元素

Question

我需要.Clone每个a到内部的下一个元素是ul

我怎样才能做到这一点 ？

<ul>

<li>
<a>link<a>
<ul></ul>
<li>

<li>
<a>link<a>
<ul></ul>
<li>

<li>
<a>link<a>
<ul></ul>
<li>

<li>
<a>link<a>
<ul></ul>
<li>

</ul>

我试过了：

$("a").each(function () {
    $(this).clone().insertAfter(this).find('ul');
});

问题是我将新的克隆元素放在原始元素旁边，我希望将它插入到下一个ul元素中

谢谢

Answer 1

你需要找到next列表，然后append找到cloned元素。我还修复了无效的HTML：

$("a").each(function() {
  $(this).next("ul").append($(this).clone(true));
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<ul>
  <li><a>link</a>
    <ul></ul>
  </li>
  <li><a>link</a>
    <ul></ul>
  </li>
  <li><a>link</a>
    <ul></ul>
  </li>
  <li><a>link</a>
    <ul></ul>
  </li>
</ul>

Answer 2

有效的HTML要求<ul>只能将<li>作为直接后代（子）。一个<li>本身可以有任何东西，但它需要与</li>正确结束。该演示遵循以下模式：

   <ul><!------------------------------Main List-->
     <li><!----------------------------List Item-->
       <a href='#/'>LINK 1</a><!---Original Link-->
       <ul><!------------------------Target List-->
         <li><!--------------------New List Item-->
           <a href='#/'>LINK 1</a><!--Clone Link-->
         </li>
       </ul>
      </li>
     ...
   </ul>

---

演示

/*
.each() <a>
Create a .clone() of current <a>
Find .next() <ul>
.append() the clone to <ul>
.wrapInner() of <ul> with a <li>
*/
$("a").each(function() {
  var dupe = $(this).clone(true, true);
  $(this).next('ul').append(dupe).wrapInner(`<li></li>`);
});

<ul>

  <li>
    <a href='#/'>LINK 1</a>
    <ul></ul>
  </li>

  <li>
    <a href='#/'>LINK 2</a>
    <ul></ul>
  </li>

  <li>
    <a href='#/'>LINK 3</a>
    <ul></ul>
  </li>

  <li>
    <a href='#/'>LINK 4</a>
    <ul></ul>
  </li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>