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

在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 ,发现 样式乱了。

5个回答

你结构都错了,加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);
    });
showbo
支付宝加好友偷能量挖 第二层for改这样,忘记i最大值了for (var j = i, k = Math.min(i + 4, 18) ; j < k; j++) {
大约 2 年之前 回复

应该是你的class里面有空格导致的,因为是拼接的空格会将字符串隔开导致识别不出来class

不推荐这种 直接拼接字符串的形式来操作,现在有很多开源的 js template 模板渲染的。 artTemplate 可以看看这个,个人用了,还不错,而且支持ie8

不推荐这种 直接拼接字符串的形式来操作 样式的问题吧

qw0907
快跑蜗牛哥 是不推荐使用这种,问题是公司,没有专门的前端,这些样式还是美工从网上拷贝下来的。
大约 2 年之前 回复

可能是转义字符的问题

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问