CODEWITHSUNDEEP
javascripthtmljqueryfor-loopclonenode
slowstarder
slowstarder

Reputation: 92

Attempting to run a jQuery.clone() within for-loop to append an element x times but getting more than desired output

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
    </head>
    <body>
        <div class="outerContainer">
            <div class="innerContainer">
                <div class="test">test</div>
            </div>
        </div>
        <script
            src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
 
            $(document).ready(function() {
               for(let i=1;i<5;i++) {
                $( ".test" ).clone().appendTo( ".innerContainer" );
                }
            });

    </script>
    </body>
</html>

Desired output:

<div class="outerContainer">
     <div class="innerContainer">
       <div class="test">test</div>
       <div class="test">test</div>
       <div class="test">test</div>
       <div class="test">test</div>
       <div class="test">test</div>
    </div>
</div>

Instead I get way more elements, almost 20. I am new to jQuery and learning. I looked into jQuery.each() but it seems that method is geared toward use with arrays + objects.

Also, I am using jQuery because I need to attach eventListeners to all the cloned elements and event delegation is not possible because the elements are not within a parentContainer.

I am also currently testing to see If I can instead use a regular for-loop with cloneNode() which works to append my elements and then possibly using jQuery.each() to attach the eventListeners?

Upvotes: 1

Views: 1411

Answers (2)

brk
brk

Reputation: 50326

This is because every time you are appending the .test inside the container it is increasing the number of elements with .test class. So clone is cloning all the elements. You can use first to get only the first element and then append it

$(document).ready(function() {
  for (let i = 1; i < 5; i++) {
    $(".test").first().clone().appendTo(".innerContainer");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerContainer">
  <div class="innerContainer">
    <div class="test">test</div>
  </div>
</div>
<script

Upvotes: 0

Swati
Swati

Reputation: 28522

You can declare your element which you need to cloned outside your for-loop then use insertAfter(cloned); to insert after that div .

Demo Code : 

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Demo</title>
</head>

<body>
  <div class="outerContainer">
    <div class="innerContainer">
      <div class="test">test</div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var cloned = $(".test") //declare this outside
      for (let i = 1; i < 5; i++) {
        cloned.clone().insertAfter(cloned); //insert same
      }
    });
  </script>
</body>

</html>

Upvotes: 1

Related Questions