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

Posted 2023-03-11

【中文标题】如何将类添加到已经在 jQuery 中调用容器 div 的附加变量

【英文标题】：How to add a class to an appended variable that's already calling on a container div in jQuery

【发布时间】：2020-02-24 19:26:44

【问题描述】：

我正在使用 fetch 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);
  

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

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

但这根本行不通。谁能发现我做错了什么？

【参考方案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>");

【参考方案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>

【参考方案3】：

您必须在 append() 操作之后立即获取 $("#homediv") 的 last() 元素，但您必须知道附加的元素标签：

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

等等