Javascript 创建一个 div，里面有来自数组的 img 和 p[i]

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>

Answer 2

您有列表结构，因此您可以使用 html 连接来实现您的所有数组值，如下所示。

演示

var imglis = ['a.jpg', 'b.jpg', 'c.jpg'], //It is the images
  descs = ["a", "b", "c"], //It is the description
  price = ["200", "300", "400"], //It is the price
  html = '';
for (var i = 0; i < imglis.length; i++) {
  html += `<div>
    <img src="${imglis[i]}">
  </div>
  <div>
    <p>${descs[i]}</p>
    <p>${price[i]}</p>
  </div>`;
}
document.getElementById('main-div').innerHTML = html;

<div id="main-div"></div>

---

您还可以将map()用于任何一个数组并获得所需的结果。此映射将返回一个数组，您可以使用 join() 连接所有值。

const imglis = ['a.jpg', 'b.jpg', 'c.jpg'], //It is the images
  descs = ["a", "b", "c"], //It is the description
  price = ["200", "300", "400"]; //It is the price;
let html = imglis.map((v, i) => {
  return `<div><img src="${v}"></div><div><p>${descs[i]}</p><p>${price[i]}</p></div>`;
}).join('');
document.getElementById('main-div').innerHTML = html;

<div id="main-div"></div>

Answer 3

您也可以使用此函数来解决您的问题

document.onload = loadElements();
function loadElements(){
    var totalHtml = "";
    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 sectionDiv = document.createElement('div');
	var imageDiv = document.createElement('div');
	var contentDiv = document.createElement('div');
	var imageEle = document.createElement('img');
	var descEle = document.createElement('p');
	var priceEle = document.createElement('p');
	imageEle.setAttribute('src', imglis[i]);
	descEle.innerHTML = descs[i];
	priceEle.innerHTML = price[i];
	imageDiv.innerHTML = imageEle.outerHTML;
	contentDiv.innerHTML = descEle.outerHTML + priceEle.outerHTML;
	sectionDiv.innerHTML = imageDiv.outerHTML + contentDiv.outerHTML;
	totalHtml += sectionDiv.outerHTML;
    }
    var elem = document.getElementById('contentHtml');
    elem.innerHTML = totalHtml;
}

<div id="contentHtml"></div>