主页 / 问题 / 764568
Accepted
dpi
Asked:2020-12-29 00:18:00 +0800 CST2020-12-29 00:18:00 +0800 CST

将数据插入多个 div

  • 772

我不知道如何将 JSON 数组中的数据插入到每个 div 中。

数据是表单的数组

您需要将 from 插入到这样一个有 9 块的 div 中。

<div class="col-xs-12 col-md-4">
            <div class="thumbnail">
                <img class='nextprod'  src="" alt="">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p></p>
                </div>
            </div>
</div>

这是我尝试执行此操作的代码，但没有插入任何内容。

if (data.contents) {

                let prod='';
                let ctn2 = data.contents.length;
                for(var ix=0; ix<ctn2; ix++) {
                    var countSrck=data.contents[1][ix]['src'].length;
                    var countAlter=data.contents[1][ix]['alternate'].length;
                       for(var isrk=0; isrk<countSrck; isrk++){
                          var srck=data.contents[1][ix]['src'][isrk];
                       for(var ialter=0; ialter<countAlter;ialter++){
                           var alter=data.contents[1][ix]['alternate'][ialter];
                           $('img.nextprod').attr({'src':srck,'alt':alter});
                       }
                       }
                   $('div.caption p').append(data.contents[1][ix]['small_text']);

                }

            }

如何将您的内容插入到每个 div 中？以及如何更智能地做到这一点？

javascript

2 个回答

  1. if (data.contents) {
  let $divThumbs = $(".thumbnail");
  let ctn2 = Math.min(data.contents.length, $divThumbs.length);
  for (var ix = 0; ix < ctn2; ix++) {
    let $divThumb = $($divThumbs[ix]);
    $divThumb.empty();

    let countSrck = data.contents[ix]['src'].length;
    let countAlter = data.contents[ix]['alternate'].length;
    for(var isrk = 0; isrk < Math.min(countSrck, countAlter); isrk++) {
      let srck = data.contents[ix].src[isrk];
      let alter = data.contents[ix].alternate[isrk];
      let $img = $("<img class='nextprod'/>");
      $img.attr({'src': srck, 'alt':alter});
      $divThumb.append($img);
    }
    let $divCaption = $("<div class="caption"><h3>Thumbnail label</h3><p></p></div>");
    $divCaption.find("p").text(data.contents[ix].small_text);
    $divThumb.append($divCaption);
  }
}
    • 0
  2. Best Answer

    var $wrapper = $('#wrapper'),
    myObj = {
        "0":{ "name":"Ford", 
              "models":"Fiesta",
              "price":"10000",
              "image":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Пистолет_Макарова.png/300px-Пистолет_Макарова.png"
        },
        "1":{ "name":"BMW", 
              "models":"X5",
              "price":"10000",
              "image":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Пистолет_Макарова.png/300px-Пистолет_Макарова.png"
        },
        "2":{ "name":"Fiat",
              "models":"Panda",
              "price":"10000",
              "image":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Пистолет_Макарова.png/300px-Пистолет_Макарова.png"
       }
    };
 
for (i in myObj) {
    $wrapper.append('<div class="some-class"><p>' + myObj[i].name + '</p>' +
    '<p>' + myObj[i].models + '</p>' +
    '<p>' + myObj[i].price + '</p>' +
    '<img src="' + myObj[i].image + '" /></div>');
}
 
 
    .some-class{
    border:1px solid #000;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper"></div>

    • 0

相关问题