我有一个子菜单列表,我想移动每个 4 个子菜单 <li></li>
给新父母<ul></ul>
分别
<ul class="sub_menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 8</li>
</ul>
<div class="container_row">
<div class="row">
<div class="col1 col_3">
<div class="wrap">
<ul>
</ul>
</div>
</div>
<div class="col1 col_3">
<div class="wrap">
<ul>
</ul>
</div>
</div>
</div>
</div>
我正在寻找的最终输出写在下面:
<div class="container_row">
<div class="row">
<div class="col1 col_3">
<div class="wrap">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>
</div>
<div class="col1 col_3">
<div class="wrap">
<ul>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 8</li>
</ul>
</div>
</div>
</div>
</div>
到目前为止我试过的代码是
$(document).ready(function() {
$(".container_row .wrap ul").append($(".sub_menu li"));
});
你知道如何实现最终输出吗?
最佳答案
我认为这就是您正在尝试做的事情。
$('ul.sub_menu li').each(function (i) {
const index = Math.trunc(i / 4);
$(this).detach().appendTo($('div.wrap ul').get(index));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sub_menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 8</li>
</ul>
<div class="container_row">
<div class="row">
<div class="col1 col_3">
<div class="wrap">
<ul></ul>
</div>
</div>
<div class="col1 col_3">
<div class="wrap">
<ul></ul>
</div>
</div>
</div>
</div>
关于javascript - 如何将子元素移动到 jQuery 中的新父元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55904033/