クリックするとトップレベルの商品と交換する

Question

divの別の要素の内容と要素の内容を入れ替えることを検討しています。

私はフィドルを作成しましたが、それは夫婦の問題があります。

https://jsfiddle.net/2o3u0366/

$('.value').click(function(){ 
var newValue = $(this).text(); 
$(this).replaceWith($('.header').text()); 
$('.header').text(newValue); 
}); 

<div class="dropdown"> 
<h2 class="header">This</h2> 
<h2 class="value">That</h2> 
<h2 class="value">Three</h2> 
<h2 class="value">Four 
</h2> 
</div> 
<div class="dropdown"> 
<h2 class="header">This</h2> 
<h2 class="value">That</h2> 
<h2 class="value">Three</h2> 
<h2 class="value">Four</h2> 
</div> 

私はそれが要素が現在いるdiv要素から引く持って探していますすることができますように。この例では、同じクラスの各divからそれを取り出しています。私は "THIS"ステートメントを置く場所や、この関数を動作させるためにDOMをどのようにトラバースすることができるのか分かりません。

ご協力いただきありがとうございます。ありがとうございます。

Answer 1

.closest()を使用して含まれているdivに移動し、次に.find()に移動して、そのdiv内のヘッダー項目を取得します。 .replaceWith()は、テキストを設定したいだけなので、必要ないことにも注意してください。次のコードでは、同じセレクタで$()を繰り返し呼び出すことを避けるために、現在のアイテムとヘッダーを参照する変数を作成しました。このよう

$('.value').click(function(){ 
 
    var $this = $(this); 
 
    var $header = $this.closest(".dropdown").find('.header'); 
 
    var newValue = $this.text(); 
 
    $this.text($header.text()); 
 
    $header.text(newValue); 
 
});

.dropdown { float: left; margin-right: 100px; } 
 
.dropdown:first-of-type { background: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
<h2 class="header">This</h2> 
 
<h2 class="value">That</h2> 
 
<h2 class="value">Three</h2> 
 
<h2 class="value">Four 
 
</h2> 
 
</div> 
 
<div class="dropdown"> 
 
<h2 class="header">This</h2> 
 
<h2 class="value">That</h2> 
 
<h2 class="value">Three</h2> 
 
<h2 class="value">Four</h2> 
 
</div>

は