Как установить содержимое, ссылаясь на массив в javascript

Question

Я хотел бы установить содержимое для каждой кнопки.

У меня есть массив, и я хотел бы установить A, B, C, D.

Но теперь, в моей работе ниже, результат немного отличается.

Есть ли способ достичь этого?

Спасибо

arr=["A","B","C","D"]

$(".button").text(arr);

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div>
  <button class="button"></button>
  <button class="button"></button>
  <button class="button"></button>
  <button class="button"></button>
</div>

Answer 1

Поскольку .button выдаст все элементы с одинаковым классом, вам нужно повторить его. Используйте каждый для итерации объекта. each принимает первый аргумент в качестве элемента, а второй - index. Используйте это index, чтобы получить значение из массива. Затем используйте текст , чтобы установить содержание кнопки

let arr = ["A", "B", "C", "D"]

$(".button").each(function(i, v) {
  $(v).text(arr[i])

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button class="button"></button>
  <button class="button"></button>
  <button class="button"></button>
  <button class="button"></button>
</div>

Answer 2

Несмотря на то, что ответ brk полностью действителен, я лично создал бы уникальную кнопку для каждого элемента в вашем массиве. Таким образом, вы не столкнетесь с проблемами, если в вашем html недостаточно кнопок для каждого элемента или наоборот.

arr = ["A", "B", "C", "D"]


arr.forEach(element => createButton(element));

function createButton(text) {
  var newButton = document.createElement("button");
  newButton.setAttribute('class', 'button');
  newButton.innerHTML = text;
  document.body.appendChild(newButton);
}