javascript - 在javascript中创建的div结构与实际的DOM不同

Question

我正在 JavaScript 循环中通过来自 instagram API 的一堆 JSON 响应对象创建一个相对复杂的嵌套 Div 结构，其中我在特定的 bootstrap div 结构中设置每个图像的 URL。然而，不知何故，当我查看 DOM 结构时，它与我映射的循环将创建的结构完全不同。

这是我的 js 文件中的循环:

     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); 

这就是我预期 DOM 在 #myflsadventure 元素下的样子

.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

这是我得到的结构

   .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

我的感觉是，当我创建 div 元素时，会自动添加结束标记，因此我的元素不会像我预期的那样嵌套。我不知道如何避免这种行为。

Answer 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>";
        }

本节在两个方面似乎是错误的。首先，您要检查数字之间的 bool 值。由于其中一个数字是 1(“真”值)，因此即使您的计数不是 1，这也始终为真。另外，这可能是设计使然，但您不会在此处增加计数变量。

还有一些其他地方您没有在 if 子句中指定“count =”(例如 count == 6 || 7 || 8)，这也不起作用。

不过，更重要的是，您可能需要重新考虑您在这里所做的事情。这是一些曲折的复杂逻辑，却很少描述它为何曲折。稍后再回来调试或修改此代码将会很困难。现在花时间让它变得更简单可能会在以后节省大量时间。