[英]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.