我需要将节点列表从一个父节点移动到另一个父节点

问题描述

当我到达另一个父节点的特定断点时，我试图移动一个节点列表（在我的例子中是类名为“.images”的 img HTML 标签）。

/* BEFORE BREAKPOINT */
<div class="old-parent">
   <img class="images">
   <div class="new-parent">
   </div>
</div>

<div class="old-parent">
   <img class="images">
   <div class="new-parent">
   </div>

</div>

<div class="old-parent">
   <img class="images">
   <div class="new-parent">
   </div>
</div>

/*AFTER REACHING THE BREAKPOINT*/

<div class="old-parent">
   <div class="new-parent">
     <img class="images">
   </div>
</div>

<div class="old-parent">
   <div class="new-parent">
     <img class="images">
   </div>
</div>

<div class="old-parent">
   <div class="new-parent">
     <img class="images">
   </div>
</div>

到目前为止，当我使用单个选择器时可以正常工作，但是当我尝试全部选择它们并将它们转移到新的父级时，它不起作用。

const newParent = document.querySelectorAll('.new-parent');
const images = document.querySelectorAll('.images');
const mediaQ = window.matchMedia('(max-width: 494px)');

const changeImg = (e) => {
    if (e.matches) {
        newParent.forEach(elem => {
            elem.insertBefore(images,elem.childNodes[0]);
        })
    }
};

mediaQ.addEventListener('change',changeImg);

然后在控制台返回一个错误：

未捕获的类型错误：无法在“节点”上执行“插入前”：参数 1 的类型不是“节点”

解决方法

您需要索引 images 才能一次移动一张图像。

const changeImg = (e,i) => {
    if (e.matches) {
        newParent.forEach(elem => {
            elem.insertBefore(images[i],elem.childNodes[0]);
        })
    }
};