CODEWITHSUNDEEP
javascriptjqueryhtml
henhen
henhen

Reputation: 159

Need help in moving divs to another div after an onclick function

I have a container holding four divs. After I click on one div, the remaining three neeed to be appended to another div. How can I achieve this?

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Week 4 Game</title>
    <link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

    <!-- Added link to the jQuery Library -->
    <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
    <script type="text/javascript" src = "assets/javascript/game.js">      </script>

    </head>
    <body>
    <div class = "characters">
    <div class="charContainer darth">
        <h2 id="c1"></h2>
        <img class="vade" src="assets/images/vader.jpg">
        <p id="c1hp" data-hp = "120"></p>
    </div>
    <div class="charContainer luke">
        <h2 id="c2"></h2>
        <img class="skywalker" src="assets/images/luke.jpg">
        <p id="c2hp" data-hp = "100"></p>
    </div>
    <div class="charContainer won">
        <h2 id="c3"></h2>
        <img class="obi" src="assets/images/obiwan.jpg">
        <p id="c3hp" data-hp = "150"></p>
    </div>
    <div class="charContainer maul">
        <h2 id="c4"></h2>
        <img class="dmaul" src="assets/images/maul.png">
        <p id="c4hp" data-hp = "180"></p>
    </div>
    </div>
    <div id="your">
    <h2>Your Character</h2>
    <!-- <img class="dmaul" src="assets/images/maul.png"> -->
    </div>
    <div id="enemies">
    <h2>Enemies</h2>
    <!-- <img class="dmaul" src="assets/images/maul.png"> -->
    </div>


    </body>
    </html>

JQuery

    $(document).ready(function(){
       var yourCharacter;
       var enemy1;
       var enemy2;
       var enemy3;
      $('#c1').text("Darth Vader");
      $('#c2').text("Luke Skywalker");
      $('#c3').text("Obi Won");
      $('#c4').text("Darth Maul");
      var health = $('#c1hp').data('hp');
      $('#c1hp').html(health);
      var health = $('#c2hp').data('hp');
      $('#c2hp').html(health);
      var health = $('#c3hp').data('hp');
      $('#c3hp').html(health);
      var health = $('#c4hp').data('hp');
      $('#c4hp').html(health);

      $('.charContainer').on('click', function(){
      yourCharacter = $(this);
      $('#your').append(yourCharacter);
      enemy1 = $('.vader');
      $('#enemies').append(enemy1);

      })

      });

I need to append the remaind charContainers that were not clicked to the enemies container div

Upvotes: 1

Views: 1380

Answers (3)

Tibrogargan
Tibrogargan

Reputation: 4603

Since "your character" has already been moved by the time the rest of the characters need to be moved, the selector '.characters>.charContainer' (all the "charContainer" children of "characters") will not select your character (since it's already moved) - just the remaining characters

$('.charContainer').on('click', function() {
    $('#your').append($(this));
    $('.characters>.charContainer').each(function() {
        $('#enemies').append($(this));
    });
})

Alternate version using arrow function:

$('.charContainer').on('click', function() {
    $('#your').append($(this));
    $('.characters>.charContainer').each( (undefined, char) => { $('#enemies').append($(char)) } );
})

Or borrowing Tekebo's use of appendTo:

$('.charContainer').on('click', function() {
    $(this).appendTo('#your');
    $('.characters>.charContainer').appendTo('#enemies');
})

Note: the main advantage of using the children selector as opposed to the siblings of the clicked div or all divs of the 'charContainer' class is that it doesn't matter which order it's done in - the result will be the same. (However, moving the clicked div last will cause more work to be done)

Upvotes: 1

Takebo
Takebo

Reputation: 199

You could simply use siblings(), like this:

$(document).ready(function(){
  $(".charContainer").on("click",function(){
    $(this).siblings().appendTo("#enemies");
    $(this).appendTo("#your");
  });
});

Upvotes: 1

dylanthelion
dylanthelion

Reputation: 1770

This works for me. You may want to add a check for equality, since the chosen div will be initially appended to enemies, then moved:

$('.charContainer').on('click', function(){
      $('.charContainer').each(function() {
        $('#enemies').append($(this));
      })
      yourCharacter = $(this);
      $('#your').append(yourCharacter);

  })

Upvotes: 2

Related Questions