在动态生成的 HTML 中更改 CSS答案

【问题标题】：Changing CSS in dynamically generated HTML在动态生成的 HTML 中更改 CSS
【发布时间】：2013-06-12 05:42:17
【问题描述】：

如果我不能使用 ID，因为我事先不知道将生成多少个相同的 HTML 标记以及哪些它需要两种不同的（红色/绿色）颜色？（我是新来的，对 JS 很陌生）

数据将在服务器上生成和收集。我将它们取回并在“字段集”中进行排序，并在“可折叠”中进行排序。数据“var a、b 和 c”放在一行（字段集）中，并且应该采用特定的字体颜色。因此对于“var d”，该字体颜色会从 XML 返回一个“xx”或“yy”，并保存在“var d”中，因此字体颜色应为“red”或“green”。

简而言之我的部分脚本：

function addPart(currentIndex,currentPart)
{
    var a = $(currentPart).find("a").text();
    var b = $(currentPart).find("b").text();
    var c = $(currentPart).find("c").text();        
    var d = $(currentPart).find("d").text();
    if(d === "xx") {
        $("div.productColor").css({"color":"green"});
    } else {
        $("div.productColor").css({"color":"red"});
    };

    $("#shoppingTableDiv").append (
        "<div data-role='collapsible'>"

            + "<h3>"
                + "<div class='productColor'>"
                        + "<fieldset class='ui-grid-b'>"
                            + "<div class='ui-block-a'>" 
                            + a
                            + "</div>"
                            + "<div class='ui-block-b'>" 
                            + b
                            + "</div>"
                            + "<div class='ui-block-c'>" 
                            + c
                            + "</div>"
                        + "</fieldset>"
                + "</div>"
            + "</h3>"
          + "</div>");

    $('#shoppingTableDiv').collapsibleset('refresh');                

}

【问题讨论】：

您可以生成 ID，使用计数器保持它们的唯一性...

标签： html css generated

【解决方案1】：

我不完全了解您希望如何为结果着色，但我认为您可以使用 fieldset 类。

例如：

.ui-grid-b div { color: red; }
.ui-grid-c div { color: green; }

如果您不知道您将拥有多少个字段集并且无法使用代码示例中显示的字段集类，您可能会发现 nth-child 选择器很有用。

可能是这样的：

fieldset:nth-child(2n) div { color: red; }
fieldset:nth-child(2n+1) div { color: green; }

【讨论】：