如何用jQuery实现每个p元素与同层级h2兄弟元素互换位置？

现有HTML结构 #

<div>
    <div>
        <h2 class="title">Hello 1</h2>
        <p class="content-info">good day</p>
    </div>

    <div>
        <h2 class="title">Hello 2</h2>
        <p class="content-info">good day</p>
    </div>

    <div>
        <h2 class="title">Hello 3</h2>
        <p class="content-info">good day</p>
    </div>
</div>

期望实现效果 #

希望每个子div里的p元素和同级的h2互换位置，最终页面呈现：

good day
Hello 1

good day
Hello 2

good day
Hello 3

错误尝试及问题 #

使用代码$(".content-info").insertAfter(".title");后，所有p元素被插入到每一个h2后面，出现错误效果：

good day
good day
good day
Hello 1

good day
good day
good day
Hello 2

good day
good day
good day
Hello 3

请问有没有jQuery方案能让元素仅与自己的同级兄弟互换位置？

解决方案 #

问题出在直接用类选择器会选中所有匹配的元素，导致每个p被插入到所有h2后面。要实现仅交换同级兄弟，需要逐个处理每个父容器内的元素，以下是两种可行方法：

方法一：遍历每个h2，操作其同级p #

$(".title").each(function() {
  // 找到当前h2的同级content-info元素，插入到它前面
  $(this).siblings(".content-info").insertBefore(this);
});

方法二：遍历每个子div容器，在容器内交换元素 #

$("div > div").each(function() {
  // 在当前容器内分别找到h2和p
  const $p = $(this).find(".content-info");
  const $h2 = $(this).find(".title");
  // 将p插入到h2前面
  $p.insertBefore($h2);
});

两种方法的核心都是通过each()遍历单个元素/容器，确保每个p只和自己所在容器内的h2交换位置，不会干扰其他容器的元素。

内容的提问来源于stack exchange，提问作者Wilfred Chong Yung