CODEWITHSUNDEEP
javascriptjqueryfor-loop
user4991434
user4991434

Reputation:

For loop exceeds the limit when using img src

I have an img_urls array which contains 2 image urls.

I use this array to loop img tag and using for loop.

But instead of having 2 images, i have 3 images in my output.

This is my code;

var img_urls = ["http://i.onionstatic.com/avclub/5648/48/16x9/1200.jpg", "https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg"];

  for (i = 0; i < img_urls.length; i++) {
    $("div").append(
      "<div><img src=' " + img_urls[i] + "'/></div>"
    );
  }

So, whats is wrong with my code?

JSFIDDLE

Upvotes: 0

Views: 160

Answers (7)

Pawan Lakhara
Pawan Lakhara

Reputation: 1150

Try this and see Demo

  <div></div>


    $(function() {

  var img_urls = ["http://i.onionstatic.com/avclub/5648/48/16x9/1200.jpg", "https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg"];

      for (i = 0; i < img_urls.length; i++) {
        $("div").append(
          "<img src=' " + img_urls[i] + "'/> </br>"
        );
      }

    });

Upvotes: 0

guradio
guradio

Reputation: 15565

<div id="container"></div>

for (var i = 0; i < img_urls.length; i++) {
console.log(img_urls.length)
  $("div#container").append(
    "<div><img src=' " + img_urls[i] + "'/></div>"
  );
}

when you append the first image you create a div in that div the horse is added and the first div is also populated by the horse

Upvotes: 0

Rahul
Rahul

Reputation: 18577

You are appending to global div element, you are appending div also, so generated html will append to generated div too.

Here is html,

<div class='test'></div>

Here is javascript code,

$(function() {

var img_urls = ["image_url1", "image_url2"];

var html = '';
for (i = 0; i < img_urls.length; i++) {
 html +=   "<div><img src=' " + img_urls[i] + "'/></div>"
}
$("div.test").append(html);
});

Please find here working link here

I hope this will help

Upvotes: 0

selvakumar
selvakumar

Reputation: 654

Reason is you are appending everything inside the loop.

$(function() {

  var img_urls = ["url1", "url2"];


var html= ""
  for (i = 0; i < img_urls.length; i++) {  
   html += "<div><img src=' " + img_urls[i] + "'/></div>";
  }
    $("div").append(html);
});

Upvotes: 0

Armin
Armin

Reputation: 1178

Problem is that you have $("div") as selector. So when you append the first image, you also add new div. So the next image is appended to two divs. Probably you can add id to your div, so

<div id="test"></div>

...

$("#test").append

Upvotes: 0

Thomas
Thomas

Reputation: 383

When adding the first image you generate a new div. Then the second image if appended to existing divs. You should have only one destination div. Add an id to the main div:

    <div id="container"></div>

--

var img_urls = ["http://i.onionstatic.com/avclub/5648/48/16x9/1200.jpg", "https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg"];

      for (i = 0; i < img_urls.length; i++) {
        $("div#container").append(
          "<div><img src=' " + img_urls[i] + "'/></div>"
        );
      }

Upvotes: 1

RonyLoud
RonyLoud

Reputation: 2436

You need to use selector i.e. id class in the main div as when the next iteration occurs it contains two div in the body. Check this fiddle

Upvotes: 0

Related Questions