jQuery 附加不显示每个方法 html

Question

我有一个元素列表。

<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 class 但它显示为：

一个[对象对象]
两个[对象对象]
三个[对象对象]

我在这里做错了什么？谢谢

Answer 1

希望对您有所帮助

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

你可以玩Here

Answer 2

问题是因为 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 元素对象并在 value 上使用 appendChild():

$(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 中创建相同的元素，那么您根本不需要循环，它是单行代码：

$('li').append('<span>Foo</span>');

Answer 3

只需更改代码中的一行，其他一切正常。

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

jQuery 附加不显示每个方法 html

jQuery append not displaying html with each method

jquery

append

each