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

【问题标题】：Javascript - Moving a Div that is Uniquely Identified by its ParentJavascript - 移动由其父级唯一标识的 Div
【发布时间】：2023-01-21 17:30:04
【问题描述】：

需要将一个没有任何唯一标识符的 div 移动到另一个没有任何唯一标识符的 div 前面。但是，子 div 确实具有唯一标识符。

开始：

<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 class="generic">
  <div id="child3"></div>
</div>

我想将 child3 div 的父级移动到 child2 div 的父级之后。结果应如下所示：

<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>

有任何想法吗？

我研究过 jQuery prependTo() 和 appendTo()，结合 parent()，但我似乎无法让它们正常工作。

【问题讨论】：

标题和文字冲突，代码告诉文字是正确的，你能修正标题吗？看起来你想订购孩子，如果只移动孩子有关系吗，还是有必要移动父母（例如，有更多特定于带有 id 的孩子的内容）？

标签： javascript jquery jquery-append

【解决方案1】：

从您的孩子那里，您获取父节点，然后交换节点。

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>

【讨论】：