2

当我单击标题时，我想切换 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 的那个

4

4 回答 4

3

您应该将所有 main-wrapper 元素嵌入到容器中（或使用主体）：

看演示

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>

查询：

$(".header-wrapper h3").click(function () {
  var $mainrWrap = $(this).closest(".main-wrapper");
  $(this).closest(".container").prepend($mainrWrap);
});
于 2013-01-06T13:42:40.917 回答
0

真的不清楚你要做什么，但你可以得到.main-wrapper你点击的那个$(this).parent().parent()。

于 2013-01-06T13:48:49.427 回答
0

看到这个：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");
}
});
于 2013-01-06T13:52:58.080 回答
0 
$(".main-wrapper")

上一行实际上选择了所有具有 main-wrapper 类的 div。在事件回调函数中this指的是被点击的元素（基本上是事件的目标）。

jsfiddle demo解决问题

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

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

我对代码的拆分比你通常做的多一点；会发生什么：

  1. firstWrapper 变量包含对具有 main-wrapper 类的所有 div 的引用
  2. clickedWrapper：使用 parents(".main-wrapper") 查找祖先树以找到具有 main-wrapper 类的祖先元素
  3. 如果指令检查 clickedWrapper 是否不是第一个。我们什么都不做。如果不是，我们在 firstWrapper 之前插入 clickedWrapper。
于 2013-01-06T14:05:30.353 回答