Javascript -移动由其父级唯一标识的Div

093gszye  于 2023-01-24  发布在  Java
关注(0)|答案(2)|浏览(109)

需要将一个没有任何唯一标识符的div移到另一个没有任何唯一标识符的div前面。但是,子div有唯一标识符。
开始日期:

<div class="container1">
  <div class="generic">
    <div id="child1"></div>
  </div>
  <div class="generic">
    <div id="child2"></div>
  </div>
  <div class="generic">
    <div id="child4"></div>
  </div>
</div>
<div class="container2">
  <div class="generic">
    <div id="child3"></div>
  </div>
</div>

我想将child3 div的父项移到child2 div的父项之后,结果应该如下所示:

<div class="container1">
  <div class="generic">
    <div id="child1"></div>
  </div>
  <div class="generic">
    <div id="child2"></div>
  </div>
  <div class="generic">
    <div id="child3"></div>
  </div>
  <div class="generic">
    <div id="child4"></div>
  </div>
</div>
<div class="container2">
</div>

有什么想法吗?
我已经研究了jQuery prependTo()和appendTo()以及parent(),但似乎无法让它们正常工作。
在我最初的帖子中,swap是可以工作的,但是div在不同的容器中,我想移动child3的父div而不与另一个div交换。

svmlkihl

svmlkihl1#

从你的孩子,你得到parentnode,然后交换节点。

const node1 = document.querySelector('#child3').parentNode;
const node2 = document.querySelector('#child4').parentNode;

swapNodes(node1, node2);

function swapNodes(n1, n2) {

  const p1 = n1.parentNode;
  const p2 = n2.parentNode;
  let i1, i2;

  if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) return;

  for (let i = 0; i < p1.children.length; i++) {
    if (p1.children[i].isEqualNode(n1)) {
      i1 = i;
    }
  }
  for (let i = 0; i < p2.children.length; i++) {
    if (p2.children[i].isEqualNode(n2)) {
      i2 = i;
    }
  }

  if (p1.isEqualNode(p2) && i1 < i2) {
    i2++;
  }
  p1.insertBefore(n2, p1.children[i1]);
  p2.insertBefore(n1, p2.children[i2]);
}
<div class="generic">
  <div id="child1">child 1</div>
</div>
<div class="generic">
  <div id="child2">child 2</div>
</div>
<div class="generic">
  <div id="child4">child 4</div>
</div>
<div class="generic">
  <div id="child3">child 3</div>
</div>
gfttwv5a

gfttwv5a2#

关于您在示例中所做更改的新代码段。

const idToMove = 'child3';
const idToWhere = 'child2';

moveNode(idToMove, idToWhere);

function moveNode(idToMove, idToWhere) {
  const nodeToDelete = document.querySelector('#' + idToMove).parentNode; //div parent class generic where reside idToMove
  const nodeToMove = nodeToDelete; // we have to avoid 2 div with same id
  nodeToMove.querySelector('div').id = 'tmp'; // changing id of node to move
  nodeToDelete.remove(); // delete original node
  nodeToMove.querySelector('div').id = idToMove; // put back the right id in the node to mode

  const nodeWhere = document.querySelector('#' + idToWhere).parentNode;
  nodeWhere.insertAdjacentElement('afterend', nodeToMove); // inserting after
}
<div class="container1">
  <div class="generic">
    <div id="child1">child1</div>
  </div>
  <div class="generic">
    <div id="child2">child2</div>
  </div>
  <div class="generic">
    <div id="child4">child4</div>
  </div>
</div>
<div class="container2">
  <div class="generic">
    <div id="child3">child3</div>
  </div>
</div>

这就是你在范例中给出的结构:在(1级)div父节点内移动节点。
它使用的是insertAdjacentElement,您可以在这里检查:https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

相关问题