Question

我有这段代码：

＆＃13;

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;

＆＃13;

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

＆＃13;

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

我正在寻找类似的东西：

   <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

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

＆＃13;

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)





})

＆＃13;

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

＆＃13;

Answer 2

你有你的列表结构，所以你可以使用html串联实现你的所有数组值。

DEMO

＆＃13;

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;

＆＃13;

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

＆＃13;

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

＆＃13;

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;

＆＃13;

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

＆＃13;

Answer 3

您也可以使用此功能来解决您的问题

https

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;
}

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

3 个答案: