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

すべてのメインラッパー要素をコンテナーに埋め込む（または本体を使用する）必要があります。

デモを見る

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);
});
于 2013-01-06T13:42:40.917 に答える
0 
$(".main-wrapper")

abovle lineは、実際にはmain-wrapperクラスを持つすべてのdivを選択します。イベントコールバック関数内では、これはクリックされた要素（基本的にはイベントのターゲット）を参照します。

問題を解決するjsfiddleデモ

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 に答える
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 に答える