How can i loop html element using jquery in javascript?

Question

I want to repeat 'post' div and all of its contents eg 50times in left-col div using jquery and call it inside html?

HTML:

 <div class="post"> Content </div>

JS:

var jQueryScript = document.createElement('script');
jQueryScript.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
document.head.appendChild(jQueryScript);

$(document).ready(function(i) {
for (let i = 2; i < 100; i++) {
  $(".post:eq(0)").clone().appendTo(".left-col");
}


 });

Carsten Løvbo Andersen · Accepted Answer · 2022-05-04 06:34:25Z

1

You can do it like this:

$(document).ready(function(i) {
  for (let i = 0; i < 50; i++) {
    $(".post:eq(0)").clone().appendTo("#left-col");
  }
});

There was a few problems with your code. First $("#post") should be $(".post"), since it's a class not an id.

Second your for loop was not correct. You were missing the {} and also it should be i < 50 not i < i.length(50)

Also important to note that I've added :eq(0) to $(".post"), since it would cause a big problem without. Because first time the loop would run, you would have 1 element with the class post, second time you would have 3 elements, third time = 6 elements and so far.

$(document).ready(function(i) {
  for (let i = 0; i < 50; i++) {
    $(".post:eq(0)").clone().appendTo("#left-col");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post"> Content </div>


<div id="left-col"></div>

answered May 4, 2022 at 6:34

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ALG Over a year ago

Thank you, changed it( left-col was also an id) ,how should i call this function in html now? Or it should append it right away to left-col?

Carsten Løvbo Andersen Over a year ago

Since you have added document ready then you can call it basically where ever you want. since it will not run until the page is ready.

Shrimp Over a year ago

If you have your javascript in its own file, you're good, as long as you make sure it is included. Else include the js code in HTML with a <script> tag.

Collectives™ on Stack Overflow

How can i loop html element using jquery in javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related