if statement in for loop not working in js

Question

i am writing a code in jquery to append image in div after ajax success but not working correctly

for (var i = 0; i < data.length; i++) {
     if(i%3===0 || i===0){
          $('#user_media').append('<div id="get_img" class="row mb-2 p-2"></div>');
     };
     var type = getFileExtension(data[i]);
     $('#get_img').append('<div id="div_img" class="col-sm ml-0"></div>');
     if (type == 'jpg' || type == 'jpeg' || type == 'png' || type == 'gif')  {
         $('#div_img').append('<img id="media_img" style="" src="'+data[i]+'" alt="..." class="img-thumbnail">');
    }
}

this what i get in html

<div id="get_img" class="row mb-2 p-2"><div id="div_img" class="col-sm ml-0">
   <img id="media_img" style="" src="uploads/post-images/aomps1.jpg" alt="..." class="img-thumbnail">
   <img id="media_img" style="" src="uploads/post-images/sj7db92522582_2886075474817029_8215339746444967936_o.jpg" alt="..." class="img-thumbnail">
   <img id="media_img" style="" src="uploads/post-images/4v5z8Computing-feat.jpg" alt="..." class="img-thumbnail">
   <img id="media_img" style="" src="uploads/post-images/5cteyimages sport.jpg" alt="..." class="img-thumbnail">
   <img id="media_img" style="" src="uploads/post-images/z20f3Hydrangeas.jpg" alt="..." class="img-thumbnail">
   <img id="media_img" style="" src="uploads/post-images/1e3jfLighthouse.jpg" alt="..." class="img-thumbnail"><img id="media_img" style="" src="uploads/post-images/h23qoHydrangeas.jpg" alt="..." class="img-thumbnail">
   <img id="media_img" style="" src="uploads/post-images/wz53xc8fdf17fde068bbefd76aab75334d401.jpg" alt="..." class="img-thumbnail">
   <img id="media_img" style="" src="uploads/post-images/s8d1gActresses-With-Killer-Shape-3-1024x527.jpg" alt="..." class="img-thumbnail">
   <img id="media_img" style="" src="uploads/post-images/bija0imageslaptop boy.jpg" alt="..." class="img-thumbnail">
</div>
<div id="div_img" class="col-sm ml-0"></div>
<div id="div_img" class="col-sm ml-0"></div>
<div id="div_img" class="col-sm ml-0"></div>
<div id="div_img" class="col-sm ml-0"></div>
<div id="div_img" class="col-sm ml-0"></div>
<div id="div_img" class="col-sm ml-0"></div>
<div id="div_img" class="col-sm ml-0"></div>
<div id="div_img" class="col-sm ml-0"></div>
<div id="div_img" class="col-sm ml-0"></div>

but i what i expected is something like this

<div class="row mb-2">
  <div class="col-sm ml-0">
     <img src="http://localhost/lasu/img/user-profile.png" alt="..." class="img-thumbnail m-0">
  </div>
  <div class="col-sm ml-0">
    <img src="http://localhost/lasu/img/user-profile.png" alt="..." class="img-thumbnail m-0">
  </div>
  <div class="col-sm ml-0">
    <img src="http://localhost/lasu/img/user-profile.png" alt="..." class="img-thumbnail m-0">
  </div>
</div>
<div class="row mb-2">
  <div class="col-sm ml-0">
    <img src="http://localhost/lasu/img/user-profile.png" alt="..." class="img-thumbnail m-0">
  </div>
  <div class="col-sm ml-0">
    <img src="http://localhost/lasu/img/user-profile.png" alt="..." class="img-thumbnail m-0">
  </div>
  <div class="col-sm ml-0">
    <img src="http://localhost/lasu/img/user-profile.png" alt="..." class="img-thumbnail m-0">
  </div>
</div>

would be really glad if some one can assist me on this thanks.

you people said i should make ID unique tried this not working

for (var i = 0; i < data.length; i++) {
    if(i%3===0 || i===0){
        $('#user_media').append('<div id="get_img'+i+'" class="row mb-2 p-2">'); // Open the container for 3 elmts
    };

    var type = getFileExtension(data[i]);
    $('#get_img'+i).append('<div id="div_img'+i+'" class="col-sm ml-0">');
        if (type == 'jpg' || type == 'jpeg' || type == 'png' || type == 'gif')  {
            $('#div_img'+i+'').append('<img style="" src="'+data[i]+'" alt="..." class="img-thumbnail">');
        }
            $('#get_img'+i).append('</div>'); // close "col-sm ml-0"

            if(i%3===0 || i===0){
                $('#user_media').append('</div>'); // close "row mb-2 p-2"
              };
}

i appreciate guys but can someone help with how to iterate the '' tag 3 time without starting over and creating another div

Too many of the same ID. That is why it is only putting it in the first ID. Remember, IDs have to be unique. Maybe have the ID increment along with i. Ie; div_img1, div_img2, etc etc.. — Dexterians
– Dexterians, Commented Jul 23, 2020 at 2:32
FWIW: This code can be written without IDs entirely. That would solve half the expected output (which doesn’t have IDs..) — user2864740
– user2864740, Commented Jul 23, 2020 at 2:59
These “anonymous” elements can be created with, eg. var div_img = $(“<div class=‘..’ />”). They can be used along with other jQ collections created with way and otherwise manipulated as though the element/jQ has been fetched from the DOM, such as get_img.append(div_img) - api.jquery.com/append — user2864740
– user2864740, Commented Jul 23, 2020 at 3:05

kmoser · Accepted Answer · 2020-07-24 02:24:23Z

1

As others have already pointed out, your first problem is that the ids must be unique. To create the structure you're looking for, you must close the <div> tags in the right place (see my comments below).

Assuming everything should go inside the #user_media element:

for (var i = 0; i < data.length; i++) {
  if(i%3===0 || i===0){
    $('#user_media').append('<div class="row mb-2 p-2">'); // Open the container for 3 elmts
  };

  // Build the div for a single img:
  var col = '<div class="col-sm ml-0">';
  var type = getFileExtension(data[i]);
  if (type == 'jpg' || type == 'jpeg' || type == 'png' || type == 'gif')  {
    col += '<img style="" src="'+data[i]+'" alt="..." class="img-thumbnail">';
  }
  col += '</div>'; // close "col-sm ml-0"

  $('#user_media').append(col);

  if(i%3===0 || i===0){
    $('#user_media').append('</div>'); // close "row mb-2 p-2"
  };
}

This is not the most efficient way to do this, but I did it this way because it involves the least changes to your original code.

edited Jul 24, 2020 at 2:24

answered Jul 23, 2020 at 2:52

kmoser

9,3693 gold badges28 silver badges45 bronze badges

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

2 Comments

user2864740 Over a year ago

This can be done (more cleanly?) by constructing individual elements as jQ collections and using normal jQ operations like append.

kmoser Over a year ago

@user2864740 Yes, it can definitely be done in a more abstract, jQuery-centric way. I purposely left that an an exercise to the reader, since I was answering OP's question about how to properly construct the nested <div>s and purposely wanted to keep my example as close to theirs as possible so they could see the relevant changes, and not be distracted by any further optimization.

Collectives™ on Stack Overflow

if statement in for loop not working in js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related