如何用jquery与其同级交换位置

Question

如何使用jquery使p的每个内容与其自己的h2同级交换位置？

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

理想情况下，我想要的结果是这样的。。。

Good Day
Hello 1
Good Day
Hello 2
Good Day
Hello 3

我尝试使用

$(".content-info").insertAfter(".title");

但结果会变成这样。。。

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解决方案可以只与自己的同级元素进行交换？

感谢

Answer 1

您可以尝试使用：

$(".content-info").each(function() {
$(this).insertBefore($(this).prev(".title"))
});

您尝试的问题是，它会在每个.title之前插入所有3个content-info

演示

$(".content-info").each(function() {
$(this).insertBefore($(this).prev(".title"))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 2

不访问tagName或类

$("div div").each(function() {
$(this).children().eq(0).appendTo(this)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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 div .title").each(function() {
const $parent = $(this).closest("div")
$(this).appendTo($parent)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>

Answer 3

$(".content-info").each(function(i, a){
$(a).prev().prepend(a)
})