点击一下，与顶级项目交换项目

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>