CODEWITHSUNDEEP
javascripthtmljquery
Yusuf Obafemi
Yusuf Obafemi

Reputation: 27

if statement in for loop not working in js

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

Upvotes: 0

Views: 207

Answers (1)

kmoser
kmoser

Reputation: 9308

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.

Upvotes: 1

Related Questions