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);
});

Answer 2

您真的不清楚自己要做什么，但可以使用.main-wrapper获得点击的$(this).parent().parent()。

Answer 3

请参阅：http://jsfiddle.net/c2U3g/2/

$(".header-wrapper h3").click(function () {
 if (!$(this).closest(".main-wrapper").is(":first-child")) {
  $(this).closest(".main-wrapper").insertBefore(".main-wrapper:first");
}
});

Answer 4

$(".main-wrapper")

abovle line实际上选择了所有带有main-wrapper类的div。内部事件回调函数此是指被点击的元素（基本上是事件的目标）。

jsfiddle demo solving the problem

var firstWrapper = $(".main-wrapper").first(),
    clickedWrapper = $(this).parents(".main-wrapper");

if (!clickedWrapper.is(":first-child")) {
    clickedWrapper.insertBefore(firstWrapper)
}

我将代码分割得比平常多一点;会发生什么：

firstWrapper变量保存对main-wrapper class
clickedWrapper：使用parent（“。main-wrapper”）查找ancerstor树以查找具有main-wrapper类的祖先元素
如果指令检查clickedWrapper是否不是第一个。我们什么都不做。如果不是，我们在firstWrapper之前插入clickedWrapper。

在jquery中切换div的位置

4 个答案: