[英]How do I move these elements in DOM
我不想更改 HTML,因為我想保留默認視圖的顯示方式,並希望在第二個視圖中移動它們。 我想知道如何動態排序 div 的類。
我想通過單擊按鈕來做到這一點。 我有adEventListener()
用於“點擊”,我正在做某事,移動邏輯將進入此事件偵聽器。
我知道我可以得到這些 div,從他們的父母那里移除並把它放在我想要的地方。 但是我不知道如何為每個人做這些,因為我有多個 lis。 我在循環中掙扎,以便我可以為每個 li 執行這些操作。 我需要使用純 JS 而不是 jQuery 來做到這一點。
<ul>
<li>
<div>
<div class="a">
<div class="b">
<a class="c">
<div class="d"></div>
<div class="e">
<div class="f"></div> // this is the first item that I want to move
</div>
<div class="g"></div> // this is the second item that I want to move
</a>
</div>
<div class= "h"></div> // I want above mentioned divs to be before this div
</div>
</div>
</li>
//There are multiples lis
<li></li>
假設您想在頁面加載時執行此操作,您可以使用以下 JQuery DOM 操作來解決您的問題:
$(document).ready(function(){
$("ul .a").each(function(index, element){
$current_div_a = $(element);
$div_h = $current_div_a.find(".h");
$div_f = $current_div_a.find(".f");
$div_f.clone().insertBefore($div_h);
$div_f.remove();
$div_g = $current_div_a.find(".g");
$div_g.clone().insertBefore($div_h);
$div_g.remove();
})
});
您可以在此演示中對其進行測試。
我強烈建議不要這樣做。 我想這也是你的問題也得到一些反對的原因。 只需修改您的 HTML 即可讓您的代碼保持干凈、可維護,並且對於任何其他開始處理您的項目的人來說都更加清晰。 盡可能保持代碼的向后兼容性將導致以后的可維護性問題。
我最終使用
var list = document.querySelectorAll("ul li");
for (var item of list) {
let fClass = item.querySelector(".f");
fClass.parentNode.removeChild(fClass);
let parentOfFirstChildAfterWhichIwantMyF = item.querySelector(//selector for parentOfFirstChildAfterWhichIwantMyF);
parentOfFirstChildAfterWhichIwantMyF.insertAdjacentElement("beforeend", fClass);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.