在js中控制样式出现问题，求助。

Question

在html页面需要显示以下数据

 <!--第一行数据-->
<div class="main_store_slide" style="margin-top:70px;">
  <div class="swiper-container swiper-container-horizontal swiper-container-free-mode">
    <div class="swiper-wrapper">
      <!--1-->
      <div class="swiper-slide swiper-slide-active lawyer_b" >
         <ul class="ul1" style="display: block;">
           <li class="s1">122</li> 
           <li class="s2">2323</li>  
        </ul> 
      </div>
      <!--2-->
     <div class="swiper-slide swiper-slide-next lawyer_b" >
        <ul class="ul1" style="display: block;">
           <li class="s1">3434</li> 
           <li class="s2">454</li>
        </ul> 
     </div>
     <!--3-->
     <div class="swiper-slide swiper-slide-next lawyer_b" >
        <ul class="ul1" style="display: block;">
           <li class="s1">334</li> 
           <li class="s2">343443</li>
        </ul> 
     </div>
     <!--4-->
     <div class="swiper-slide swiper-slide-next lawyer_b" >
        <ul class="ul1" style="display: block;">
           <li class="s1">12</li> 
           <li class="s2">34</li>
        </ul> 
     </div>
  </div>
</div>
</div>
<!--end第一行数据-->

<!--第二行数据-->
<div class="main_store_slide" style="margin-top:70px;">
  <div class="swiper-container swiper-container-horizontal swiper-container-free-mode">
    <div class="swiper-wrapper">
       <!--1-->
      <div class="swiper-slide swiper-slide-active lawyer_b" >
         <ul class="ul1" style="display: block;">
           <li class="s1">122</li> 
           <li class="s2">2323</li>  
        </ul> 
      </div>
      <!--2-->
     <div class="swiper-slide swiper-slide-next lawyer_b" >
        <ul class="ul1" style="display: block;">
           <li class="s1">3434</li> 
           <li class="s2">454</li>
        </ul> 
     </div>
     <!--3-->
     <div class="swiper-slide swiper-slide-next lawyer_b" >
        <ul class="ul1" style="display: block;">
           <li class="s1">334</li> 
           <li class="s2">343443</li>
        </ul> 
     </div>
     <!--4-->
     <div class="swiper-slide swiper-slide-next lawyer_b" >
        <ul class="ul1" style="display: block;">
           <li class="s1">12</li> 
           <li class="s2">34</li>
        </ul> 
     </div>
  </div>
</div>
</div>
<!--end第二行数据-->
……

因这些数据是从接口中读取，然后在页面上显示，
所以，在js中控制相关样式，如下所示：

 <script type="text/javascript">
<!--
    $(function(){

       var str=""
       var j=0;
       for(var i=0;i<18;i++){
             j++
            if(j%4==0){
               str+="<div class='main_store_slide' style='margin-top:70px;'>";
                 str+="<div class='swiper-container swiper-container-horizontal swiper-container-free-mode'>";
                 str+="<div class='swiper-wrapper'>";
             }
              str+="<div class=\"swiper-slide swiper-slide-active lawyer_b\" >";
              str+="<ul class=\"ul1\" style=\"display: block;\">";
                  str+="<li class=\"s1\">12</li>";
              str+="<li class=\"s2\">34</li>";  
                   str+=" </ul> </div>";
          if(j%4==0){ 
                 str+="</div>";
                 str+="</div>";
                 str+="</div>";
                  }

       }
 $("#divid").html(str);
    })

//-->
</script>

请问 以上 js中该 如何修改。
有试过 用 :nth-of-type ，发现 样式乱了。

Answer 1

你结构都错了，加nth-of-type有什么用，用2层for不是好理解点

   $(function () {
        var str = ""
        for (var i = 0; i < 18; i += 4) {

            str += "<div class='main_store_slide' style='margin-top:70px;'>";
            str += "<div class='swiper-container swiper-container-horizontal swiper-container-free-mode'>";
            str += "<div class='swiper-wrapper'>";
            for (var j = i, k = i + 4; j < k; j++) {
                str += "<div class=\"swiper-slide swiper-slide-active lawyer_b\" >";
                str += "<ul class=\"ul1\" style=\"display: block;\">";
                str += "<li class=\"s1\">" + i + '-' + j + "</li>";
                str += "<li class=\"s2\">34</li>";
                str += " </ul> </div>";
            }

            str += "</div>";
            str += "</div>";
            str += "</div>";

        }
        $("#divid").html(str);
    });