Question

我希望将元素的内容与div中另一个元素的内容进行交换。

我创造了一个小提琴，但它有几个问题：

$('.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中拉出它。我无法弄清楚在哪里放置一个＆＃34;这个＆＃34;语句或如何遍历DOM以使此功能起作用。

非常感谢任何帮助或建议，谢谢！

Answer 1

执行此操作的一种方法是使用.closest()转到包含div，然后使用.find()获取该div中的标题项。另请注意，您不需要.replaceWith()，因为您只想设置文本。在下面的代码中，我创建了引用当前项和标题的变量，以避免重复调用具有相同选择器的$()。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: