Как добавить значения объекта в html элементов с jQuery?

Question

Я пытался добавить значения объекта в несколько элементов div, но я изо всех сил пытаюсь получить ожидаемое поведение.

Вот мой код:

obj = {
  valeur1: "text1",
  valeur2: "text2",
  valeur3: "text3",
  valeur4: "text4"
}

$('div').each(function(i) {
  $.each(obj, function(index, value) {
    if (value in $('div')) {
      return
    } else {
      $('div').text(value);
    }
  })
});

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

Я не понимаю, почему я всегда получаю:

text4
text4
text4
text4

Пожалуйста, не могли бы вы объяснить, в чем проблема с моим алгоритмом?

Большое спасибо за вашу помощь!

Answer 1

Ты зациклен внутри oop. Поэтому любые введенные вами значения перезаписываются до последнего l oop.

Один способ исправить, например, так:

$(function() {
  var obj = {
    valeur1: "text1",
    valeur2: "text2",
    valeur3: "text3",
    valeur4: "text4"
  }

  var i = 0;

  $.each(obj, function(key, value) {
    $("div").eq(i++).html(value);
  });
});

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

В этом примере выполняется итерация самого объекта. Поскольку $.each() даст нам пару key и value, мы можем установить переменную index для использования в l oop. Мы можем нацелиться на элемент <div>, используя .eq().

Еще один пример:

$(function() {
  var obj = {
    valeur1: "text1",
    valeur2: "text2",
    valeur3: "text3",
    valeur4: "text4"
  }

  $("div").each(function(i, el) {
    var k = Object.keys(obj);
    $(el).html(obj[k[i]]);
  });
});

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

Этот, мы повторяем элементы. На этот раз мы получим пару index и element. Поскольку мы хотим получить указанные c соответствующие элементы из объекта, мы можем создать массив ключей и использовать каждый из них в l oop.

Ваш выбор.

Answer 2

var obj = [
  "text1",
  "text2",
  "text3",
  "text4"
]

console.log(obj.length);

$('div').each(function(i) {
  this.innerHTML = obj[i];
});

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

Используете ли вы вышеуказанную модель? Вы можете легко объявить строковый массив и повторить его, как я продемонстрировал.

Answer 3

Вам не нужны вложенные циклы. Используйте индекс в главном l oop, чтобы получить соответствующий элемент свойства.

И вы должны установить $(this).text(), а не $('div').text(), так как последний устанавливает текст all DIVs, а не текущий элемент l oop.

obj = {
  valeur1: "text1",
  valeur2: "text2",
  valeur3: "text3",
  valeur4: "text4"
}

$('div').each(function(i) {
  $(this).text(obj['valeur' + (i+1)])
});

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