Javascript 创建一个 div，里面有 array[i] 中的 img 和 p

Question

我有这个代码:

var imglis = ['a.jpg', 'b.jpg', 'c.jpg'] //It is the images
var imgs = "";
var descs = ["a", "b", "c"]; //It is the description
var des = "";
var price = ["200", "300", "400"]; //It is the price
var p = "";

for (var i = 0; i < imglis.length; i++) {
  var img = document.createElement('img');
  var desc = document.createElement('p');
  img.setAttribute('src', imglis[i]);
  desc.innerHTML = descs[i];
  imgs += img.outerHTML;
  des += desc.outerHTML;
}

var image = document.getElementById('image');
image.innerHTML = imgs;
var descss = document.getElementById('descss');
descss.innerHTML = des;

<div id="image"></div>
<div id="descss"></div>

它有效，但结果不是我想要的。

我正在寻找类似的东西:

   <div> // This is the div created from first array,it should have 2 more
        <div >
            <img src="a.jpg">
        </div>
        <div>
                <p>a</p>
                <p>200</price>
        </div>
    </div>

我在这里呆了一个世纪，请帮助我。

Answer 1

1. 使用.each()循环img
2. 使用图像索引来获取等效的描述和价格

var imglis = ['a.jpg', 'b.jpg', 'c.jpg'] //It is the images

var descs = ["a", "b", "c"]; //It is the description

var price = ["200", "300", "400"]; //It is the price


$.each(imglis, function(i, v) {

  var div = $('<div></div>')
  div.append('<div><img scr=' + v + '/></div><div><p>' + descs[i] + '</p><p>' + price[i] + '</price</div>')
  $('body').append(div)





})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>