快跑蜗牛哥
2018-02-07 06:32
采纳率: 100%
浏览 1.0k
已采纳

在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);
        });
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • xingping123 2018-02-07 06:45

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

    评论
    解决 无用
    打赏 举报
  • legendtao1985 2018-02-07 07:47

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

    评论
    解决 无用
    打赏 举报
  • lwusb2 2018-02-07 07:50

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

    评论
    解决 无用
    打赏 举报
  • qq_23223845 2018-02-07 08:10

    可能是转义字符的问题

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题