jQuery - 使用点击功能内部的每个移动 div

Question

我要放置.move div 位于 .destination 内当.gridview在 .item 内点击其他如果 .listview被点击。
当前，当单击任一 View 时 .move div 被迭代多次。如何更改代码以便 .move每个 .item 附加一次 div ?

$(".gridview").on("click", function() {
  $(".item").each(function() {
    var $this = $(this);
    $this.find(".move").appendTo(".destination");
  });
  var $this = $(this).closest(".container");
  $this.find(".listview").removeClass("active");
  $this.find(".gridview").addClass("active");
  $this.find(".block").css("display", "flex");
});

$(".listview").on("click", function() {
  $(".item").each(function() {
    var $this = $(this);
    var $list = $this.closest(".list");
    $this.find(".move").appendTo(".item");
  });
  var $this = $(this).closest(".container");
  $this.find(".gridview").removeClass("active");
  $this.find(".listview").addClass("active");
});

.item {
  margin: 1.3rem 0;
  border: 2px solid;
}

.destination {
  height: 35px;
  border: 3px solid
}

.move {
  height: 25px;
  border: 2px solid;
  background: green
}

.block {
  display: none;
  height: 45px;
  width: 45px;
  border: 2px solid green;
}

.active {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="gridview">Grid</div>
  <div class="listview active">List</div>
  <div class="list">
    <div class="item">
      <div class="destination"></div>
      <div class="block"></div>
      <div class="move"></div>
    </div>
    <div class="item">
      <div class="destination"></div>
      <div class="block"></div>
      <div class="move"></div>
    </div>
  </div>
</div>

Answer 1

在您当前的代码中，您正在使用 appendTo(".destination")这将追加所有 .move每个 destination 内的 div div 改为使用 appendTo($(this).find(".destination"))所以这只会附加到当前项目目标 div。与 listview 相同您需要使用 $(this)因为在这里你需要附加到 item div 本身。
演示代码 :

$(".gridview").on("click", function() {
  $(".item").each(function() {
    var $this = $(this);
    $this.find(".move").appendTo($(this).find(".destination")); //find destination div inside item and append there 
  });
  var $this = $(this).closest(".container");
  $this.find(".listview").removeClass("active");
  $this.find(".gridview").addClass("active");
  $this.find(".block").css("display", "flex");
});

$(".listview").on("click", function() {
  $(".item").each(function() {
    var $this = $(this);
    var $list = $this.closest(".list");
    $this.find(".move").appendTo($(this)); //append to current item which is refer currently inside each
  });
  var $this = $(this).closest(".container");
  $this.find(".gridview").removeClass("active");
  $this.find(".listview").addClass("active");
});

.item {
  margin: 1.3rem 0;
  border: 2px solid;
}

.destination {
  height: 35px;
  border: 3px solid
}

.move {
  height: 25px;
  border: 2px solid;
  background: green
}

.block {
  display: none;
  height: 45px;
  width: 45px;
  border: 2px solid green;
}

.active {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="gridview">Grid</div>
  <div class="listview active">List</div>
  <div class="list">
    <div class="item">
      <div class="destination"></div>
      <div class="block"></div>
      <div class="move"></div>
    </div>
    <div class="item">
      <div class="destination"></div>
      <div class="block"></div>
      <div class="move"></div>
    </div>
  </div>
</div>