Question

所以这里有什么，我有几个场景我似乎无法将任何样式应用于来自get请求的内容，而其中一个我设法能够但是它不会被认为是最佳实践。

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

方案

1）我使用JQuery创建DOM对象，并将LI＆lt; - SPAN＆lt; - 字符串附加到空UL，然后声明UL的所有子项都将显示为绿色。（这不起作用＆amp;是的我可以针对UL并且所有东西都继承了样式，但这对我的想法不起作用）

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

＆＃13;

//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);
            }
            })
    }
});


*/

＆＃13;

<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>

＆＃13;

我还没有找到一个可靠的答案，说明为什么会发生这种情况，最终我想要使用跨度来排列订单，无论名称长度如何。

编辑：
发生的事情（如答案中所述）是我将空的LI的SPAN和字符串附加到原始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>元素。

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

同时将attributes span css属性设置为display，以便将block属性应用于该元素。

＆＃13;

width

＆＃13;

//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");
      }
    })
  }
});

＆＃13;

如何使用JQuery将样式适当地应用于正常运行的get请求？

1 个答案: