CODEWITHSUNDEEP
javascriptjqueryhtml
Thalatta
Thalatta

Reputation: 4578

Div structure created in javascript is different in the actual DOM

I am creating a relatively complicated nested Div structure in a Javascript loop over a bunch of JSON response objects from the instagram API, where I am setting the URL of each image, within a particular bootstrap div structure. However, somehow, when I look at the DOM structure, it is completely different from what I mapped out the loop would create.

Here is the loop in my js file:

     htmlz = "<div class='container'><div class='row-fluid'>";
      count = 0;
      rounded_style = " style='border:1px solid #; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;'"
      $.each(response.data, function(i, item) {
        if (count == 0 ){
          htmlz += "<div class='col-md-6'><img src='"+item.images.standard_resolution.url+ "'" + rounded_style+"></div><div class='col-md-6'><div class='container'>";
          count = count + 1;
        }
        else if (count == 9){
           htmlz += "</div><div class='row-fluid'><div class='col-md-6'><div class='container'><div class='row-fluid'><div class='col-md-6'><img src='" + item.images.low_resolution.url+ "'" + rounded_style + "></div>";
           count = count + 1;
        }
        else if (count == 13){
         htmlz += "</div><div class='col-md-6'><img src='" + item.images.standard_resolution.url+ "'" + rounded_style + "></div></div></div>";
         count = count + 1;

        }
        else if (count ==5){ 
          htmlz += "</div></div><div class='row-fluid'><div class='col-md-4'><img src='" +item.images.low_resolution.url+ "'" +rounded_style+ "></div>";
          count = count + 1;
        }
        else if (count == 4 || 12){
          htmlz += "<div class='col-md-6'><img src='"+item.images.low_resolution.url+ "'" + rounded_style +"></div></div></div>"; 
          count = count + 1;
        } 
        else if (count == 6  ||7 || 8  ){
          htmlz += "<div class='col-md-4'><img src='"+ item.images.low_resolution.url+ "'" + rounded_style + "></div>"; 
          count = count + 1;
        } 
        else if ( 1 || 3 || 11){
          htmlz += "<div class='row-fluid'><div class='col-md-6'><img src='" + item.images.low_resolution.url + "'" + rounded_style + " ></div>";
        }
        else{
          htmlz += "<div class='col-md-6'><img src='"+ item.images.low_resolution.url+ "'"+ rounded_style + "></div></div>"; 
          count = count + 1;
        }
      });
  $("#myflsadventure").append(htmlz);

This is how I anticipate the DOM looking like under the #myflsadventure element

.container
  .row-fluid
    .col-md-6
    .col-md-6
      .container
        .row-fluid
          .col-md-6
          .col-md-6
        .row-fluid
          .col-md-6
          .col-md-6
  .row-fluid
    .col-md-4
    .col-md-4
    .col-md-4
    .col-md-4
  .row-fluid
     .col-md-6
       .container
         .row-fluid
           .col-md-6
           .col-md-6
         .row-fluid
           .col-md-6
           .col-md-6
     .col-md-6

Here is the structure I am getting

   .container
     .row-fluid
       .col-md-6
       .col-md-6
       .col-md-6
   .col-md-6
   .col-md-6
   .row-fluid
     .col-md-4
     .col-md-6

   .col-md-6
   .col-md-6
   .row-fluid
     .col-md-6
   .col-md-6
   .col-md-6

My feeling is that somehow, when I create a div element, is automatically adds the closing tag, and therefore my elements are not nested as I was anticipating. I do not know how to avoid this behavior.

Upvotes: 0

Views: 64

Answers (1)

MikeTheReader
MikeTheReader

Reputation: 4190

        else if ( 1 || 3 || 11){
          htmlz += "<div class='row-fluid'><div class='col-md-6'><img src='" + item.images.low_resolution.url + "'" + rounded_style + " ></div>";
        }

This section seems wrong in two ways. First, you're checking for a boolean value between numbers. Since one of those numbers is 1 (a 'true' value), this will always be true, even if your count isn't 1. Plus, and this may be by design, but you're not incrementing your count variable here.

There are also a couple other places where you aren't specifying 'count =' in your if clause (like count == 6 || 7 || 8), which is also not going to work.

Bigger picture, though, is that you may want to re-think what you're doing here. This is some complex logic that twists and turns with very little describing why it's twisting and turning. Coming back to debug or modify this code later is going to be difficult. Time spent now on making it simpler may save lots of time later.

Upvotes: 1

Related Questions