如何将一个类的元素转移到js中的另一个类的块?

Question

请帮我将同一类的几个元素移动到必要的块中。可以有无限数量的块和元素。元素包含不同的内容。如果你能给我一些关于纯js和jquery的提示，我会很高兴的。

最初的情况是这样的:

<div class="block">
<div class="move-here">Move here 1
<p>p1</p>
<p>p2</p>
</div>
<div>Move from here 1
<p class="moved-element"><b>Moved element 1</b></p>
<p>p3</p>
<p>p4</p>
</div>
</div>
<div class="block">
<div class="move-here">Move here 2
<p>p5</p>
<p>p6</p>
</div>
<div>Move from here 2
<p class="moved-element"><b>Moved element 2</b></p>
<p>p7</p>
<p>p8</p>
</div>
</div>

结果应该是这样的:

<div class="block">
<div class="move-here">Move here 1
<p class="moved-element"><b>Moved element 1</b></p>
<p>p1</p>
<p>p2</p>
</div>
<div>Move from here 1
<p>p3</p>
<p>p4</p>
</div>
</div>
<div class="block">
<div class="move-here">Move here 2
<p class="moved-element"><b>Moved element 2</b></p>
<p>p5</p>
<p>p6</p>
</div>
<div>Move from here 2
<p>p7</p>
<p>p8</p>
</div>
</div>

试过此代码:

const elementsToMove = document.querySelectorAll('.moved-element');
elementsToMove.forEach((element) => {
const parent = element.parentNode;
const target = document.querySelector('.move-here');
target.insertBefore(element, target.firstChild);
});

或:

const elementsToMove = document.querySelectorAll('.moved-element');
elementsToMove.forEach(element => {
const targetBlock = element.closest('.move-here');
if (targetBlock) {
targetBlock.appendChild(element);
}
});

或:

$('.perenosimiy-element').appendTo('.perenesti-syuda');

这些都不能正常工作。

链接到编辑器中一个不工作的示例- https://codepen.io/YuriyFrolov/pen/PodMGyd

Answer 1

.move- element和.move-here的共同祖先是。block，使用close来获取合适的。block

从。block中使用querySelector找到合适的。move-here.

。move-here里面有一些文本，我们希望。move- element出现在文本之后，所以我们不是把它插入。move-here first子元素之前，而是把它插入。move-here firstElementChild子元素之前。

const elementsToMove = document.querySelectorAll('.moved-element');
elementsToMove.forEach((element) => {
const parent = element.closest(".block");
const target = parent.querySelector('.move-here');
target.insertBefore(element, target.firstElementChild);
});

<div class="block">
<div class="move-here">Move here 1
<p>p1</p>
<p>p2</p>
</div>
<div>Move from here 1
<p class="moved-element"><b>Moved element 1</b></p>
<p>p3</p>
<p>p4</p>
</div>
</div>
<div class="block">
<div class="move-here">Move here 2
<p>p5</p>
<p>p6</p>
</div>
<div>Move from here 2
<p class="moved-element"><b>Moved element 2</b></p>
<p>p7</p>
<p>p8</p>
</div>
</div>