jQuery 附加不显示每个方法 html
jQuery append not displaying html with each method
我有一个元素列表。
<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 但它显示为:
- 一个[对象对象]
- 两个[对象对象]
- 三个[对象对象]
我在这里做错了什么?谢谢
希望对您有所帮助
var liNodes = $("li");
liNodes.each(function(index, value) {
//var span = $("<span></span>");
let span = document.createElement("span");
value.append(span);
console.log(value);
});
});
你可以玩Here
问题是因为 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>');
只需更改代码中的一行,其他一切正常。
var liNodes = $("li");
liNodes.each(function(index, value) {
var span = "<span>Foo</span>";
$(value).append(span);
console.log(value);
});
我有一个元素列表。
<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 但它显示为:
- 一个[对象对象]
- 两个[对象对象]
- 三个[对象对象]
我在这里做错了什么?谢谢
希望对您有所帮助
var liNodes = $("li");
liNodes.each(function(index, value) {
//var span = $("<span></span>");
let span = document.createElement("span");
value.append(span);
console.log(value);
});
});
你可以玩Here
问题是因为 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>');
只需更改代码中的一行,其他一切正常。
var liNodes = $("li");
liNodes.each(function(index, value) {
var span = "<span>Foo</span>";
$(value).append(span);
console.log(value);
});