-3

How to do this with jQuery: There are 4 divs with IDs. When a div is clicked on, it's moved to another div (let's call it newDiv1), and the other 3 are moved to newDiv2. I can only do that with 1 specific div, using detach and appendTo, but I don't know how to apply the rule to all of them.

HTML: 

<div class="park1">
    <div id="car1">Car 1</div>
    <div id="car2">Car 2</div>
    <div id="car3">Car 3</div>
    <div id="car4">Car 4</div>
</div>
<div class="park2"></div>
<div class="park3"></div>
<div class="park4"></div>

JS:

// when click on car1, car1 will move to park2, the other 3 to park3
$("#car1").on("click", function() {
    $("#car1").detach().appendTo(".park2");

    $("#car2").detach().appendTo(".park3");
    $("#car3").detach().appendTo(".park3");
    $("#car4").detach().appendTo(".park3");
});

// when car 2 is already at park3, click on it, it moves to park4
$("#car2").on("click", function() {
    $("#car2").detach().appendTo(".park4");
});

I need that happens when I click on any of the 4.

Viet
  • 6,513
  • 12
  • 42
  • 74
  • What does "it's moved to another div (let's call it newDiv1), and the other 3 are moved to newDiv2" mean? – Rex Aug 22 '17 at 15:37
  • There are 4 divs: div1, div2, div3, div4. I need to click on any of the 4 and move that one to a new div below (newDiv1), and the rest (3 divs) will automatically moved to another new div below (newDiv2). – Viet Aug 22 '17 at 15:40
  • You mean move as in "gets a new parent" in the DOM? – Ward Segers Aug 22 '17 at 15:45
  • Possible duplicate of [jQuery - move element and return to its exact previous location?](https://stackoverflow.com/questions/10591723/jquery-move-element-and-return-to-its-exact-previous-location) – Ward Segers Aug 22 '17 at 15:47
  • No. I don't want them to move back. I want to have each of them have that function: when I click on any, that specific one will be moved to another div, and the rest will be moved to another div. There's no moving back here. – Viet Aug 22 '17 at 15:49
  • Ward Segers: I don't think so. – Viet Aug 22 '17 at 15:51
  • Could you post your actual HTML and script attempt, instead of this "conceptual" markup? – Louys Patrice Bessette Aug 22 '17 at 15:51
  • I'm reacting to your last edit. The problem is clear... What is unclear is if you tried something... And if you even have some HTML (I mean valid HTML, not what you posted!). Please read [MCVE](https://stackoverflow.com/help/mcve). – Louys Patrice Bessette Aug 22 '17 at 15:56
  • 1
    I think you need to use the not selector https://api.jquery.com/not-selector/ so you want all 'cars' with a class but exclude the one with the id chosen. – Richard Housham Aug 22 '17 at 15:57
  • 1
    I've updated my question. It's a bit vague so I'm sorry for any misunderstanding. – Viet Aug 22 '17 at 16:03

1 Answers1

1

Just an .append() moves the element.

And to ensure the right event handler is applyed on click of a div, depending in which "park" it is... Use event delegation.

// when click on car1, car1 will move to park2, the other 3 to park3
$(".park1").on("click", "div", function() {
  console.log("click on a car in park #1");
  
  // Move all other cars to park #3
  $(this).parent().children().not($(this)).appendTo(".park3");
  
  // Move the clicked car to park #2
  $(".park2").append($(this));
  
});

// when car 2 is already at park3, click on it, it moves to park4
$(".park3").on("click", "div", function() {
  console.log("click on a car in park #3");
  
  // Move the clicked car to park #4
  $(".park4").append($(this));
  
});
.park1{
  border: 3px solid black;
  padding: 0.5em;
  margin: 1em;
}
.park2{
  border: 3px solid green;
  padding: 0.5em;
  margin: 1em;
}
.park3{
  border: 3px solid yellow;
  padding: 0.5em;
  margin: 1em;
}
.park4{
  border: 3px solid red;
  padding: 0.5em;
  margin: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="park1">
    <div id="car1">Car 1</div>
    <div id="car2">Car 2</div>
    <div id="car3">Car 3</div>
    <div id="car4">Car 4</div>
</div>
<div class="park2"></div>
<div class="park3"></div>
<div class="park4"></div>
Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64