Jquery - 交换两个DIV的html内容

Question

我无法在按下按钮后使用'each'循环来实现这种交换方法。

循环迭代，但文本并没有像想象的那样。

也许我正在使用错误的方法将html分配给这些标记的div？

$(function() {
  $('.direction-toggle').click(function() {
    $(this).toggleClass('off');
    $("#CW").each(function(i, el) {
      if ($(el).html() == "↺") {
        $(el).html("↻");
      } else if ($(el).html() == "↻") {
        $(el).html("↺");
      }
    });
  });
});

.direction-toggle {
  margin: auto;
  width: 30px;
  background: white;
  cursor: pointer;
  border: 2px solid black;
  border-right-width: 15px;
  padding: 0 5px;
  border-radius: 5px;
  text-decoration: none;
  transition: all .5s ease;
}
.direction-toggle.off {
  background: rgba(200, 230, 255, 1);
  border-right-width: 2px;
  border-left-width: 15px;
}
#CW,
#CCW {
  float: right;
}

<div class="twist-left">&#65513; R 1
  <div id="CCW" class="direct">&#8634;</div>
  <div class="">
  </div>
</div>
<div class="twist-right">L 1
  <div id="CW" class="direct">&#8635;</div>&#65515;
  <div class="">
  </div>
</div>

<div class="direction-toggle">
  &nbsp;
</div>

http://jsfiddle.net/wJftm/1/

Answer 1

如果我理解正确，请使用以下代码：

$(function() {
  $('.direction-toggle').click(function() {
    $(this).toggleClass('off');
    var twistLeftHtml  = $('.twist-left').html();
    var twistRightHtml = $('.twist-right').html();
    $('.twist-left').html(twistRightHtml);
    $('.twist-right').html(twistLeftHtml);
  });
});

或者这个：

$('.direction-toggle').click(function() {
    $(this).toggleClass('off');
    var twistLeftDirectHtml  = $('.twist-left .direct').html();
    var twistRightDirectHtml = $('.twist-right .direct').html();
    $('.twist-left .direct').html(twistRightDirectHtml);
    $('.twist-right .direct').html(twistLeftDirectHtml);
});

请记住，id属性在DOM中必须是唯一的。按标识$('#CW')选择将仅返回第一个匹配的元素。

JSFiddle