javascript - 如何在不进入多个框的情况下获取同一 div 中的内容？

Question

我有以下代码

<div class="col-md-9">
                 <div id="statbox">
                       {% for obj in product_type %}
                       {% for obj1 in vastu %}
                        <script type="text/javascript">
                            var product  = "{{ obj.type_product }}";
                            var product1 = "{{ name }}";
                            var vastu    = "{{ obj1.vastu_key.id }}";
                            var type_id  = "{{ obj.id }}";

                            if (vastu == type_id)
                            {
                            var title = "{{ obj1.title }}";
                            var brand = "{{ obj1.brand }}";
                            var img   = "{{ obj1.image }}";
                            var price = "{{ obj1.price }}";

                            $("#statbox").prepend("<div id='box2'>"
                                                + title
                                                + brand
                                                + price
                                                +"</div>");
                            }
                        </script>
                            {% endfor %}
                         {% endfor %}
                 </div>

我在这里使用了两个 for 循环和在 css 中设置样式的 box2，通过运行这段代码，我得到了 box2 多次，因为内容包含在子 for 循环中，并且标题、品牌、img、价格显示在每个新的 box2 中.但我希望新的 box2 应该只根据父 for 循环中包含的内容生成，而不是根据子 for 循环中包含的内容生成并且所有内容，即与父 for 循环的每个内容相关联的标题、品牌、img、价格应显示在同一个 box2 中。多个box2只根据parent for循环和parent for循环创建的同一个box2中child for循环的内容创建。谢谢....

Answer 1

创建一个 JS 对象并循环它。也把ID改成class

像这样:

var boxes = [
  {% for obj in product_type %}
    {
    {% for obj1 in vastu %}
     "product":"{{ obj.type_product }}",
     "product1":"{{ name }}",
     "vastu": "{{ obj1.vastu_key.id }}",
     "type_id":"{{ obj.id }}"
     {% if obj1.vastu_key.id == obj.id %}
     ,
     "title":"{{ obj1.title }}",
     "brand":"{{ obj1.brand }}",
     "img":"{{ obj1.image }}",
     "price":"{{ obj1.price }}"
     {% endif %}
   {% endfor %}
   }
   {% endfor %}
];                         
$.each(boxes,function(obj) {
  $("#statbox").prepend("<div class='box2'>"
   + obj.title || ""
   + obj.brand || ""
   + obj.price || """
   +"</div>");
});