jQuery - move div using each inside of click function

user_13710524 0
Viewed 51

I want to place the .move div is inside of .destination when .gridview is clicked else inside of .item if .listview is clicked.

Currently when either view is clicked the .move div is iterated multiple times. How do I change the code so that the .move div is appended once for each .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>

jquery
2 Answers

Can you try the below code?

$(".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");
});
user_64502720

In your current code you are using appendTo(".destination") this will append all .move div inside every destination div instead use appendTo($(this).find(".destination")) so this will append only to current items destination div. Same for listview you need to use $(this) because here you need to append to item div itself.

Demo Code: 

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

user_106064000
Related