jQuery - .clone () elements immortal?

JavaScript
1

animation not affecting .clone () element
i cloned target5 using .clone() but when i use the animation for example animated hinge, only one target5 on the left-well get the animation effects and the other doesn’t. whats the idea/explanation behind this

Your code so far

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "orange");
    $("#left-well").children().css("color", "green");
    $(".target:nth-child(2)").addClass("animated bounce");
    $(".target:even").addClass("animated shake");
    $("#target5").addClass("animated hinge")

  });
</script>

<!-- Only change code above this line -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: jQuery - Use jQuery to Modify the Entire Page

Link to the challenge:

2

An element’s #id should be unique, so searching by hashtag will only return the first one that is found in the document. When you add the animation, the one that gets found is actually the clone, and not the original.

You could use .addClass("animated hinge"); on your element before cloning it, or you could assign the original and the clone to separate variables like this:

const x = $("#originalelement");
const y = x.clone();
...

Then you could modify them separately in any way you like.

3

i understand why it didn’t animate both but why animate the clone and not the original

4

Of the left and right wells, which one appears first in the code? If you were searching the code from top to bottom to find the id #target5 , and there was one in the left well and one in the right, which would you find first?

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.