如何解决我需要将节点列表从一个父节点移动到另一个父节点
当我到达另一个父节点的特定断点时,我试图移动一个节点列表(在我的例子中是类名为“.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]);
})
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。