Question

我不想更改HTML，因为我想让显示器保持默认视图的方式，并希望在第二个视图中移动它们。我想知道如何动态地命令div的类。
我想通过按钮点击这样做。我有adEventListener()用于'click'我正在做的事情，移动逻辑将进入这个事件监听器我知道我可以得到这些div，从他们的父母那里删除并把它放在我想要的地方。但我不知道如何为他们每个人做这些，因为我有多个lis。我正在努力与循环，以便我可以为每个李做这些。我需要使用纯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>

Answer 1

假设您希望在加载页面时执行此操作，您可以使用以下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();
  })
});

您可以在this demo上进行测试。

我强烈建议不要这样做。我想这也是为什么你的问题也有一些贬值的原因。只需修改HTML，即可让任何开始处理项目的人保持代码清洁，可维护和清晰。尽可能保持代码的向后兼容性将导致以后的可维护性问题。

Answer 2

我最终使用

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

如何在DOM中移动这些元素

2 个答案: