如何使用 JQuery 将样式适当地应用于有效的 get 请求?

Question

所以这是怎么回事，我有几个场景，我似乎无法将任何样式应用于来自 get 请求的内容，在其中一个情况下，我设法能够，但这不会被视为最佳实践。

前提： 我有一个空的 Ul，Li's 将从 GET 请求附加到 API。

场景

1) 我使用 JQuery 创建 DOM 对象，并将 LI <-- SPAN <-- 字符串附加到空的 UL 中，然后声明 UL 的所有子项都将被涂成绿色。 (这不起作用，是的，我可以针对 UL 并让所有内容继承样式，但这不适用于我的想法)

2)我附加一个包含HTML标记的字符串，然后添加样式并将它们与GET请求吐出的内容连接起来。(出于某种原因，它似乎以这种方式工作，但我真的不想在一个字符串中创建 LI 和 SPANS + 类)

//scenario 1
var $orders = $("#orders");
$.ajax({
type: 'GET',
url: 'http://rest.learncode.academy/api/johnbob/friends',
success: function (data) {
$.each(data, function (i, item) {
if (item.name && item.drink) {
var $spn = $("<span></span>");
var $lli = $("<li></li>");
// $spn.append(String(item.name));
$spn.css({width: "20px"});
$orders.append($lli).append($spn).append("name: "+item.name+", Order: " + item.drink);
$orders.children().css({ color: "green" });
console.log($spn);
}
})
}
});
/* scenario 2
var $orders = $("#orders");
$.ajax({
type: 'GET',
url: 'http://rest.learncode.academy/api/johnbob/friends',
success: function (data) {
$.each(data, function (i, item) {
if (item.name && item.drink) {
var $spn = $("<span>hell</span>");
var $lli = $("<li></li>")
// $spn.append(String(item.name));
$spn.css({width: "20px"});
$orders.append("<li>Name: <span class='tato'>" + item.name + ",</span> Order: " + item.drink + "</li>");
$orders.children().css({ color: "green" });
console.log($spn);
}
})
}
});
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Coffee Orders</h2>
<br />
<ul id="orders">
<li>control group</li>
</ul>
<br />
<h4>Add a coffee order</h4>
<p>name: <input type="text" id="name"></p>
<p>drink: <input type="text" id="drink"></p>
<button id="add_order">Add!</button>

我一直无法找到关于为什么会发生这种情况的可靠答案，最终我会想要使用跨度排列订单，无论名称长度如何。

编辑：
发生的事情(如答案中所述)是我将空的 LI 的 SPANs 和字符串附加到原始 UL。使用 append() 时，请记住您添加的任何内容(以链形式)都将附加到原始声明的元素中，而不是前一个元素。

旁注：
有关模板化传入GET内容的更好实践的更多信息，请查看我找到的这个视频。 https://www.youtube.com/watch?v=GbNWPn8vodo&index=9&list=PLoYCgNOIyGABdI2V8I_SWo22tFpgh2s6_

Answer 1

正如@Taplar所指出的，问题是使用.append()。您正在追加<span>元素和#text节点以<ul>

$orders.append($lli).append($spn).append("name: "+item.name+", Order: " + item.drink);

哪些不是<ul>的有效子元素

允许的内容零个或多个<li>元素，而这些元素又经常 包含嵌套的<ol>或<ul>元素。

若要更正问题，请使用函数attributes属性jQuery(html, attributes)html#text节点设置为<span>元素的.innerHTML，并将span元素设置为<li>元素的.innerHTML。

此外spancssdisplay属性设置为blockwidth以便将属性应用于元素。

//scenario 1
var $orders = $("#orders");
$.ajax({
type: 'GET',
url: 'http://rest.learncode.academy/api/johnbob/friends',
success: function(data) {
$.each(data, function(i, item) {
if (item.name && item.drink) {
var $spn = $("<span></span>", {
html: "name: " 
+ item.name 
+ ", Order: " 
+ item.drink,
css: {
width: "20px",
display: "block",
position: "relative"
}
});
var $lli = $("<li></li>", {
html: $spn
});
$orders.append($lli)
.children().css("color", "green");
}
})
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Coffee Orders</h2>
<br />
<ul id="orders">
<li>control group</li>
</ul>
<br />
<h4>Add a coffee order</h4>
<p>name:
<input type="text" id="name">
</p>
<p>drink:
<input type="text" id="drink">
</p>
<button id="add_order">Add!</button>