如何在对象 jQuery 中应用样式动态创建的 DOM

Posted 2023-05-09

【中文标题】如何在对象 jQuery 中应用样式动态创建的 DOM

【英文标题】：How to Apply Styling Dynamic Created DOM in Objects jQuery

【发布时间】：2021-10-25 04:10:49

【问题描述】：

我在 jQuery 中创建了两个对象......两个对象中的数据都是动态创建的 DOM 元素。我想单独设置这些元素的样式。怎么可能？

代码如下：

var obj1 = 
    name : $("<p>Orange</p>"),
    price: $("<p class='price'>20</p>"),
    details : $("<div class='details'><p class='code'>1000</p><p class='pid'>234</p></div>"),
    details2 : $("<div class='details2'><p class='code2'>100</p><p class='pid2'>2334</p></div>")


var obj2 = 
    name : $("<p class='name'>Clone</p>"),
    price: $("<p class='price'>30</p>"),
    details : $("<div class='details'><p class='code'>1010</p><p class='pid'>345</p></div>")


jQuery.each(obj1, function(i, val) 
    $("#temp").append(i + " => " + val.text() + "<br/>");
)

【问题讨论】：

尝试单独的css类

我做了但没有工作

目前你只迭代obj1，对吧？你需要 DOM 上的两个对象？

将属性值设为 html 字符串而不是 jQuery 对象（如果您没有在其他地方使用 jQuery 功能），只需使用 val 而不是 val.text()。

@SafinaSiddique 我的回答有帮助吗？

【参考方案1】：

问题是您的代码正在提取 jQuery 元素的 文本，因此丢失了 HTML 元素、类等：

// Works, but you only get text, not HTML nodes, classes, etc,
// eg just 'Orange' from the first element of your object
$("#temp").append(i + " => " + val.text() + "<br/>");

可能您尝试仅附加实际的 jQuery 对象，但那也不起作用，因为 .append() 不接受文本、jQuery 对象和 HTML 的混合：

// Does not work
$("#temp").append(i + " => " + val + "<br/>");

相反，您可以只附加您的 jQuery 对象：

$("#temp").append(val);

或者如果你也想要你的对象键信息，你可以先附加它，然后单独附加 jQuery 对象：

$("#temp").append(i + ' => ').append(val);

或先将字符串键信息添加到 jQuery 对象，然后将新结果附加到 DOM：

val.prepend(i + ' => ');
$("#temp").append(val);

这是一个有效的 sn-p 演示，其中包含一些样式以显示真正包含的元素和类。单击运行以查看它的运行情况。

var obj1 = 
    name : $("<p>Orange</p>"),
    price: $("<p class='price'>20</p>"),
    details : $("<div class='details'><p class='code'>1000</p><p class='pid'>234</p></div>"),
    details2 : $("<div class='details2'><p class='code2'>100</p><p class='pid2'>2334</p></div>")


var obj2 = 
    name : $("<p class='name'>Clone</p>"),
    price: $("<p class='price'>30</p>"),
    details : $("<div class='details'><p class='code'>1010</p><p class='pid'>345</p></div>")


jQuery.each(obj1, function(i, val) 
    val.prepend(i + ' => ');
    $("#temp").append(val);
)

.price  color: red; 
.code, .code2  color: blue; 
.pid, .pid2  color: green; 

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

<div id="temp"></div>