我可以循环或重写代码以某种方式填充此列表吗？

Question

我什至不知道从哪里开始？！？ 提示将不胜感激！

JS：

document.getElementById('first').getElementsByTagName('h3')(0).innerHTML = data.products[0].product;
document.getElementById('second').getElementsByTagName('h3')(0).innerHTML = data.products[1].product;
document.getElementById('third').getElementsByTagName('h3')(0).innerHTML = data.products[2].product;

document.getElementById('first').getElementsByTagName('p')(0).innerHTML = data.products[0].description;
document.getElementById('second').getElementsByTagName('p')(0).innerHTML = data.products[1].description;
document.getElementById('third').getElementsByTagName('p')(0).innerHTML = data.products[2].description;

document.getElementById('first').getElementsByTagName('h3')(0).setAttribute('class', data.products[0].code);
document.getElementById('second').getElementsByTagName('h3')(0).setAttribute('class', data.products[1].code);
document.getElementById('third').getElementsByTagName('h3')(0).setAttribute('class', data.products[2].code);

document.getElementById('first').setAttribute('code', data.products[0].code);
document.getElementById('second').setAttribute('code', data.products[1].code);
document.getElementById('third').setAttribute('code', data.products[2].code);

HTML：

<div class="items">
<ul>
<li id="first"><h3></h3><span><p></p><br><button>Find</button></span></li>
<li id="second"><h3></h3><span><p></p><br><button>Find</button></span></li>
<li id="third"><h3></h3><span><p></p><br><button>Find</button></span></li>
</ul>
</div>

Answer 1

尝试以下javascript：

var ids = ['first', 'second', 'third'];
for (var i = 0; i < ids.length; i++) {
    var product = data.products[i];
    var element = document.getElementById(ids[i]);

    element.getElementsByTagName('h3')[0].innerHTML = product.product;
    element.getElementsByTagName('p')[0].innerHTML = product.description;
    element.getElementsByTagName('h3')[0].setAttribute('class', product.code);
    element.setAttribute('code', product.code);
}

Answer 2

var element, index, len, ids, product, header;

ids = ['first', 'second', 'third'];
for (index = 0, len = ids.length; index < len; index++) {
  element = document.getElementById(ids[index]), product = data.products[index],
  header = element.getElementsByTagName('h3')[0];

  header.innerHTML = product.product;
  element.getElementsByTagName('p')[0].innerHTML = product.description;
  header.setAttribute('class', product.code);
  element.setAttribute('code', product.code);
}

Answer 3

根据经验，使用循环可以执行任何重复性的工作，如果您发现自己使用了document.get ...方法之一，且参数完全相同，则将结果多次存储在变量中以备后用

var ids = "first,second,third".split(",");
var el, h3;
for (var i = 0, il = ids.length; i<il;i++) {
    el = document.getElementById(ids[i]);
    h3 = el.getElementsByTagName('h3')[0];
    h3.innerHTML = data.products[i].product;
    el.getElementsByTagName('p')[0].innerHTML = data.products[i].description;
    h3.setAttribute('class', data.products[i].code);
    el.setAttribute('code', data.products[i].code);
}

Answer 4

使用关联数组。

var arr = new Array("first","second","third");
for(var i in arr) {
    //Now, i has the value first in first iteration & similarly ...
        //Do you assignments here using i
}

Answer 5

getElementsByTagName返回一个数组 ，在javascript []中表示和数组元素：代替此：

document.getElementById('first').getElementsByTagName('h3')(0).innerHTML = data.products[0].product;

采用：

document.getElementById('first').getElementsByTagName('h3')[0].innerHTML = data.products[0].product;

那应该做到的！