Jquery 与给定css集成的困难

一个CSS已经提供给我，我正试图把我的代码整合到CSS中

这是css

<div data-role="collapsible">
    <h3>Popcorn</h3>
    <div class="prd-items-detials">
        <ul>
            <li class="head">
                <form>
                    <input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true">
                    <label for="checkbox-mini-0">Small Pack 150g</label>
                </form>
            </li>
            <li class="prd-items-qt">
                <div class="col">
                    <i class="minus"></i>
                    <i class="qt">12</i>
                    <i class="plus"></i>
                </div>
                <div class="col">

                </div>
                <div class="col">
                    Rs: 150/-
                </div>
            </li>
        </ul>

    </div>
</div>

爆米花


小包装150克


12
卢比：150/-

这是它看起来的样子

我试着用同样的方法来达到目的

activateUiHTML.append('<div data-role="collapsible">');
activateUiHTML.append('<div>Popcorn</div>');
activateUiHTML.append('<div class="prd-items-detials">');
activateUiHTML.append('<ul>');
activateUiHTML.append('<li class="head">');
activateUiHTML.append('<form>');
activateUiHTML.append('<input type="checkbox" name="Popcorn" id="Popcorn" data-mini="true">');
activateUiHTML.append('<label for="checkbox-mini-0">Popcorn</label>');
activateUiHTML.append('</form>');
activateUiHTML.append('</li>');
activateUiHTML.append('<li class="prd-items-qt">');
activateUiHTML.append('<div class="col">');
activateUiHTML.append('<i class="minus"></i>');
activateUiHTML.append('<i class="qt">12</i>');
activateUiHTML.append('<i class="plus"></i>');
activateUiHTML.append('</div>');
activateUiHTML.append('<div class="col">150</div>');
activateUiHTML.append('</li>');
activateUiHTML.append('</ul>');
activateUiHTML.append('</div>');
activateUiHTML.append('</div>');
activateUiHTML.append(activateUiHTML) ;

activateUiHTML.append（“”）；
activateUiHTML.append（“爆米花”）；
activateUiHTML.append（“”）；
activateUiHTML.append（“
”）；
activateUiHTML.append（'
'）；
activateUiHTML.append（“”）；
activateUiHTML.append（“”）；
activateUiHTML.append（“爆米花”）；
activateUiHTML.append（“”）；
activateUiHTML.append（“
”）；
activateUiHTML.append（“
”）；
activateUiHTML.append（“”）；
activateUiHTML.append（“”）；
activateUiHTML.append（'12'）；
activateUiHTML.append（“”）；
activateUiHTML.append（“”）；
activateUiHTML.append（'150'）；
activateUiHTML.append（“
”）；
activateUiHTML.append（“
”）；
activateUiHTML.append（“”）；
activateUiHTML.append（“”）；
activateUiHTML.append（activateUiHTML）；

但看起来是这样的

---

有谁能告诉我如何动态构建它吗？？？

当你添加一个

浏览器时，它会自动关闭，这样它就会破坏你的html

如果您真的想这样做，可以这样创建：

activateUiHTML.append('<div data-role="collapsible"><h3>Popcorn</h3><div class="prd-items-detials"><ul><li class="head"><form><input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true"><label for="checkbox-mini-0">Small Pack 150g</label></form></li><li class="prd-items-qt"><div class="col"><i class="minus"></i><i class="qt">12</i><i class="plus"></i></div><div class="col"></div><div class="col">Rs: 150/-</div></li></ul></div></div>');

activateUiHTML.append（'Popcorn
小包装150g
12Rs:150/-
）；

---

您应该考虑使用模板（例如）

首先，第一个代码不是CSS，而是HTML。第二，我真的不知道您的问题是什么？请指定您希望以这种方式构建项目列表的具体问题。如果是，并且您熟悉AngularJS，请查看ng repeat指令，您可以使用该指令定义模板，它将为各种项目复制该模板。您将以对象数组的形式传入项。基于您提供的关于您正试图实现的目标的有限信息，很难进一步提供帮助。要使它看起来像您想要的那样，请将HTML中的类放在CSS中，并从要复制的图像中复制样式。