jQuery добавление не отображается html с каждым методом - PullRequest
Новая
       34

jQuery добавление не отображается html с каждым методом

2 голосов
/ 24 марта 2020

У меня есть список элементов. 

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

  $(function() {
    var liNodes = $("li");
    liNodes.each(function(index, value) {
      var span = $("<span></span>");
      value.append(span);
      console.log(value);
    });
  });

Я хочу перебирать элементы li, добавляя класс span каждому, но вместо этого он отображает это:

  • Один [объект объекта]
  • Два [объект объекта]
  • Три [объект объекта]

Что я здесь не так делаю? спасибо

Ответы [ 3 ]

2 голосов
/ 24 марта 2020

Проблема в том, что value является объектом Element, а не объектом jQuery, поэтому вы вызываете собственный метод append(), а не jQuery. Чтобы это исправить, сначала преобразуйте value в jQuery объект: 

$(function() {
  var liNodes = $("li");
  liNodes.each(function(index, value) {
    var span = $("<span>Foo</span>");
    $(value).append(span);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Или создайте объект span Element и используйте appendChild() для value: 

$(function() {
  var liNodes = $("li");
  liNodes.each(function(index, value) {
    var span = document.createElement('span');
    span.innerText = 'Foo';
    value.appendChild(span);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

С учетом всего вышесказанного учтите, что если вы хотите создать идентичный элемент во всех li, то вам не понадобится al oop в все, это одна строка: 

$('li').append('<span>Foo</span>');
1 голос
/ 24 марта 2020

Надеюсь, это поможет 

    var liNodes = $("li");
    liNodes.each(function(index, value) {
      //var span = $("<span></span>");
      let span = document.createElement("span");
      value.append(span);
      console.log(value);
    });
  });

Вы можете поиграть Здесь

0 голосов
/ 24 марта 2020

Всего одна строка изменений в вашем коде, все остальное работает нормально. 

  var liNodes = $("li");
    liNodes.each(function(index, value) {
        var span = "<span>Foo</span>";
        $(value).append(span);
        console.log(value);
    });
...