[英]How do I move children elements to a new parent element in jQuery?
我有一個子菜單列表,我想分別將每個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"));
});
你知道如何實現最終輸出嗎?
您可以為div設置id並使用這樣的每個方法
$(document).ready(function() { var length = $(".sub_menu li").length; //console.log(length) $(".sub_menu li").each(function(index, item){ if(index < length/2){ $("#first ul").append(item); //console.log($(".container_row .wrap ul:nth-child(0)").length) }else{ $("#second ul").append(item); //console.log(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" id="first"> <ul> </ul> </div> </div> <div class="col1 col_3"> <div class="wrap" id="second"> <ul> </ul> </div> </div> </div> </div>
這就是你想要做的事情。
$('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>
你可以這樣做:
HTML
<ul id="set-1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
</ul>
<ul id="set-2"></ul>
JS
jQuery(document).ready(function($)
{
let list = $('#set-1').find('li'),
midRange = Math.ceil(list.length / 2),
first = list.slice(0, midRange),
last = list.slice(midRange);
$('#set-1').html('');
first.each(function() {$('#set-1').append('<li>'+ $(this).html() +'</li>')});
last.each(function() {$('#set-2').append ('<li>'+ $(this).html() +'</li>')});
});
基本上我們得到li元素,將數量分成兩個並創建兩個數組。 然后遍歷每個並附加html
jsfiddle: https ://jsfiddle.net/rquo7nk9/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.