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

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');
});

問題是我在原來的旁邊得到了新的克隆 elment，我希望將它插入下一個 ul elment

謝謝

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>