Клонировать каждый элемент добавить следующий элемент

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>