Question

我正在使用获取xml来遍历约会数据库以在html页面上查看它们：

if (results !=null && results.value !=null {
  for (var i = 0; i < result.value.length; i++) {
    time = results.value[i].starttime;
    place = results.value[i].location;
    who = results.value[i].attendee;

    $("#homediv").append(time);
    $("#homediv").append(place);
    $("#homediv").append(who);
  }
}

它们都成功显示在ID为'homediv'的同一个div中。但是，我想分别为每个元素添加一个类，以便在CSS中对它们进行不同的样式设置，但它不起作用。我尝试了“ addClass”，但在代码中执行了以下操作：

$("#homediv").append(time).addClass('time-style');
$("#homediv").append(place)addClass('place-style');
$("#homediv").append(who)addClass('who-style');

但这根本行不通。有人可以发现我在做什么吗？

Answer 1

改为尝试

$("#homediv").append(`<span class='time-style'>${time}</span>`);
$("#homediv").append(`<span class='place-style'>${place}</span>`);
$("#homediv").append(`<span class='who-style'>${who}</span>`);

或没有字符串插值（ES6）

$("#homediv").append("<span class='time-style'>" + time + "</span>");
$("#homediv").append("<span class='place-style'>" + place + "</span>");
$("#homediv").append("<span class='who-style'>" + who + "</span>");

Answer 2

假设您附加的元素是div：

$("#homediv").append("<div>time</div>").find("div").last().addClass('time-style');
$("#homediv").append("<div>place</div>").find("div").last().addClass('place-style');
$("#homediv").append("<div>who</div>").find("div").last().addClass('who-style');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="homediv"></div>

Answer 3

您必须在执行append（）操作后立即获取$（“＃homediv”）的last（）元素，但必须知道附加的元素标签：

$("#homediv").append(time);
$("#homediv").find('<time tag>').last().addClass('time-style');

等

如何在已在jQuery中的容器div上调用的附加变量中添加类

3 个答案: