jQuery - déplacer un div en utilisant chaque élément de la fonction click

Question

Je veux placer le .move est à l'intérieur de .destination cuando .gridview est cliqué ailleurs dans la fenêtre .item si .listview est cliqué.

Actuellement, lorsque l'on clique sur l'une des deux vues, la .move div est itéré plusieurs fois. Comment puis-je modifier le code pour que la .move est ajouté une fois pour chaque .item ?

$(".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

Pouvez-vous essayer le code ci-dessous ?

$(".gridview").on("click", function() {
  $.each($(".list .item"),function(i,v){ 
   $(this).find(".destination").append($(v).find(".move"))
 })
  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() {
   $.each($(".list .item"),function(i,v){
      $(this).append($(v).find(".destination .move"))
    })
  var $this = $(this).closest(".container");
  $this.find(".gridview").removeClass("active");
  $this.find(".listview").addClass("active");
});

Answer 2

Dans votre code actuel, vous utilisez appendTo(".destination") cela ajoutera toutes les .move à l'intérieur de chaque destination utilisez plutôt appendTo($(this).find(".destination")) de sorte que cela ne s'ajoutera qu'au div de destination des éléments actuels. Idem pour listview vous devez utiliser $(this) car ici, vous devez ajouter à item div lui-même.

Code démo :

$(".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>