Question

我有一个数组

var arr = [3,0,1,0,0];

和多个div。

<div class="fb0"></div>
<div class="fb1"></div>
<div class="fb2"></div>
<div class="fb3"></div>
<div class="fb4"></div>

更多

如何按数组中的数字交替将数组中的值添加到按类的div中。

<div class="fb0">3</div>
<div class="fb4">0</div>
<div class="fb2">1</div>
<div class="fb3">0</div>
<div class="fb1">0</div>

Answer 1

您可以使用jQuery的.each()遍历所有div。内部事件处理函数使用索引从数组中获取项目并设置当前元素的文本：

var arr = [3,0,1,0,0];

$('[class^=fb]').each(function(idx){
  if(arr.length >= idx) // check if the array length is grater/equal to the current index.
    $(this).text(arr[idx]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fb0"></div>
<div class="fb1"></div>
<div class="fb2"></div>
<div class="fb3"></div>
<div class="fb4"></div>

具有Document.querySelectorAll()和Array.prototype.forEach()的JavaScript解决方案：

var arr = [3,0,1,0,0];
var elements = [].slice.call(document.querySelectorAll('[class^=fb]'));
elements.forEach(function(div, idx){
  if(arr.length >= idx) // check if the array length is grater/equal to the current index.
    div.textContent = arr[idx];
});

<div class="fb0"></div>
<div class="fb1"></div>
<div class="fb2"></div>
<div class="fb3"></div>
<div class="fb4"></div>

Answer 2

您可以使用querySelectorAll选择div，然后可以使用forEach将值相应地添加到每个div。

function update(){
  let arr = [3,0,1,0,0];
  let divs = document.querySelectorAll('[class^=fb]')
  divs.forEach((e,i)=>{
    e.innerHTML = arr[i]
  })

}

<div class="fb0"></div>
<div class="fb1"></div>
<div class="fb2"></div>
<div class="fb3"></div>
<div class="fb4"></div>
<button onClick=update()>Click me to see output</button>

将JS数组值添加到多个div

2 个答案: