问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

两个for循环遍历多层嵌套的json数据时,只执行一层for循环,求解?

头像
web攻城狮
    169615

    这是 json 数据
    [

    {
  "content":"ffffffff ",
  "doctorAddress":"img/1.png",
  "doctorId":1,
  "doctorName":"杨小松",
  "img":[
    {
      "headId":1,
      "imgAddress":"img/1.jpg",
      "imgAddressId":1
    },
    {
      "headId":1,
      "imgAddress":"img/2.jpg",
      "imgAddressId":2
    }
  ],

},
{
  "content":"ffffffff",
  "doctorAddress":"img/1.png",
  "doctorId":1,
  "doctorName":"杨小松",
  "img":[
    {
      "headId":7,
      "imgAddress":"img/2.jpg",
      "imgAddressId":4
    }
  ],

}

    ]

    ajax后 用for循环拼接

        var MainCortent='';
    var MainCortentImg='';
    for (var i=0;i<data.length-1; i++) {

        MainCortent+='<section class="image-text">' +
            '<div class="say-lis-image-text"><div class="title"><h3>'+data[i].content+'</h3></div></div>' +
            '<div class="say-lis-new-title"><a href="#"><img src='+data[i].doctorAddress+'></a><span class="doc-name">'+data[i].doctorName+'</span></div><div class="content"><p>'+data[i].content+'</p>'+<div class="img"></div>+'</div>' +
            '</div></section>';

         for(var j=0;j< data[i].img.length;j++){
             MainCortentImg+='<div class="imgbox">'+ data[i].img[j].imgAddress+'</div>'
         }
         

    }
           $(".main").html(MainCortent);
           $(".img")html(MainCortentImg);

    大概的dom结构是：

    <div class="main">
     <section class="image-text">
         <div class="say-lis-image-text"></div>
         <div class="say-lis-new-title"></div>
         <div class="content">
              <p></p>
             <div class="img"></div>
         </div>
     </section>
</div>

    效果本来是第一个section里面的img里面放两张图片，第二发一张。
    可是运行发现每个盒子里面都是三张。

    javascriptjsonfor循环
    阅读 7.6k
    3 个回答
    得票最新
    头像
    lmxdawn
      1.4k32834
      ✓ 已被采纳

      不晓得是不是这样的效果。

      <body>


  <div class="main">
      <section class="image-text">
          <div class="say-lis-image-text"></div>
          <div class="say-lis-new-title"></div>
          <div class="content">
              <p></p>
              <div class="img"></div>
          </div>
      </section>
  </div>

</body>



<script>
    var html='';
    var $main = $(".main");
    for (var i in data) {

        html += '<section class="image-text">';
        html += '      <div class="say-lis-image-text"><div class="title"><h3>'+data[i].content+'</h3></div></div>';
        html += '      <div class="say-lis-new-title"><a href="#"><img src='+data[i].doctorAddress+'></a><span class="doc-name">'+data[i].doctorName+'</span></div>';
        html += '      <div class="content">';
        html += '          <p>'+data[i].content+'</p>';
        html += '          <div class="img">';
        //图片
        var imgs = data[i].img;
        for (var j in imgs){
            html += '<div class="imgbox">'+ imgs[j].imgAddress+'</div>';
        }
        
        html += '          </div>';
        html += '      </div>';
        html += '</section>';
    }
    $main.html(html);
</script>
      头像
      苏生不惑
        18.9k2787139
        var MainCortentImg='';//加在这个循环外
for(var j=0;j< data[i].img.length;j++){
             MainCortentImg+='<div class="imgbox">'+ data[i].img[j].imgAddress+'</div>'
         }
        头像
        web攻城狮
          169615

          var MainCortent='';

          for (var i=0;i<data.length; i++) {

          var MainCortentImg='';
for(var j=0;j< data[i].img.length;j++){
    MainCortentImg+='<div class="imgbox">'+ data[i].img[j].imgAddress+'</div>'
}

MainCortent+='<section class="image-text">' +
    '<div class="say-lis-image-text">' +
    '<div class="title">' +
    '<h3>'+data[i].content+'</h3>' +
    '</div>' +
    '</div>' +
    '<div class="say-lis-new-title"' + '>' +
    '<a href="#"><img src='+data[i].doctorAddress+'></a>' +
    '<span class="doc-name">'+data[i].doctorName+'</span>' +
    '</div>' +
    '<div class="content">' +
    '<p>'+data[i].content+'</p>' +
    '<div class="img">'+MainCortentImg+'</div></div>' +
'</div>' +
'</section>';

          }

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题