jquery - jquery中div的位置切换

Question

我想在单击标题时切换 div 的位置。这是我的 HTML 示例:

<div class="main-wrapper">
    <div class="header-wrapper">
        <h3>Header</h3>
    </div>
<p>Paragraph</p>
</div>

<div class="main-wrapper">
    <div class="header-wrapper">
        <h3>Header</h3>
    </div>
<p>Paragraph</p>
</div>

<div class="main-wrapper">
    <div class="header-wrapper">
        <h3>Header</h3>
    </div>
<p>Paragraph</p>
</div>

这是我的 jquery:

$(".header-wrapper h3").click( function() { $(".main-wrapper").prependTo(".header-wrapper:first"); });

问题是现在它试图将所有 .main-wrappers 放在第一个之前，但我只想要保存我点击的 h3 的那个

Answer 1

您应该将所有主包装元素嵌入到容器中(或使用主体):

SEE DEMO

HTML:

<div class="container">
<div class="main-wrapper">
  <div class="header-wrapper">
     <h3>Header</h3>

  </div>
  <p>Paragraph 1</p>
</div>
<div class="main-wrapper">
  <div class="header-wrapper">
     <h3>Header</h3>

  </div>
  <p>Paragraph 2</p>
</div>
<div class="main-wrapper">
  <div class="header-wrapper">
     <h3>Header</h3>

  </div>
  <p>Paragraph 3</p>
</div>

  </div>

Jquery:

$(".header-wrapper h3").click(function () {
  var $mainrWrap = $(this).closest(".main-wrapper");
  $(this).closest(".container").prepend($mainrWrap);
});