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

Question

我需要将每个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');
});

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

谢谢

Answer 1

您需要找到next列表，然后找到append clone d个元素。我还修复了无效的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>