如何在jQuery中创建多个sub div标签 [英] How to create multiple sub div tags in jQuery

问题描述

这是工作代码，像这样我想要

我尝试使用jQuery获取相同的内容，但问题在于两个图像之间没有空格，底部没有添加愿望

< a href =http://code.reloado.com/exesox4/3/edit#preview =nofollow noreferrer> http://code.reloado.com/exesox4/3/edit#preview

解决方案

只需对脚本进行更改

  $ .eac h（numbers，function（）{
 $（。product-loop）。append（< div class ='col-sm-4'id ='col+ numbers [num] +' >< / div>）
 $（＃col+ numbers [num]）。append（$（< div class ='product-image-wrapper'id ='img-wrap +数字[num] +'>< / div>））
 $（＃img-wrap+ numbers [num]）。append（$（< div class ='single-产品'id ='singlePro+ numbers [num] +'>< / div>））
 $（＃singlePro+ numbers [num]）。append（$（< div class ='productinfo text-center'id ='productCentre+ numbers [num] +'>< / div>））
 $（＃productCentre+ numbers [num]）.append $（< img src ='http：//www.tutorialspoint.com/images/html.gif'alt =''/> \ 
< h2> $ 52< / h2> \ 
< p> Easy Polo Black Edition< / p> \ 
 < a href ='＃'class ='btn btn-default add-to-cart'> \ 
< i class ='fa fa-shopping-cart'>< / i> Add （< / />））
 $（＃singlePro+ numbers [num]）.append（$（< div class ='product-overlay'id ='productOverlay+ numbers [num ] +'>< / div>））
 $（＃productOverlay+ numbers [num]）.append（$（< div class ='overlay-content'id ='overlayContent +数字[num] +'>< / div>））
 $（＃overlayContent+ numbers [num]）.append（$（< h2> $ 66< / h2> ;< p> Easy Polo Black Edition< / p>< a href ='＃'class ='btn btn-default add-to-cart'>< i class ='fa fa-shopping-cart'> ;< / i>添加到购物车< / a>））
 
 $（＃img-wrap+ numbers [num]）。append（$（< div class =选择'id ='chse'+ numbers [num] +'>< / div>））
 $（＃chse+ numbers [num]）.appen d（$（< ul class ='nav nav-pills nav-justified'> \ 
< li>< a href =''>< i class ='fa fa-plus < / i>< / i>< / i>< / i>< / i>添加至愿望清单< / a>< / li> \ 
< li>< a href =''>< i class =加上比较< / a>< / li> \ 
< / ul> \ 
））
 num + = 1; 
}）; 
}）; 
  

演示： http://code.reloado.com/ovetig3/edit#preview

Here is working code ,like this i want http://code.reloado.com/adudeq/7/edit --see pic for Output

i try to get the same thing using jQuery but the problem here is there is no place between two image and no add wish at the bottom

http://code.reloado.com/exesox4/3/edit#preview

解决方案

just make changes to you script

  $.each(numbers, function () {
                $(".product-loop").append("<div class='col-sm-4' id='col" +numbers[num] + "'></div>")
                $("#col" + numbers[num]).append($("<div class='product-image-wrapper' id='img-wrap" + numbers[num] + "'></div>"))
                $("#img-wrap" + numbers[num]).append($("<div class='single-products' id='singlePro" + numbers[num] + "'></div>"))
                $("#singlePro" + numbers[num]).append($("<div class='productinfo text-center' id='productCentre" + numbers[num] + "'></div>"))
                $("#productCentre" +numbers[num] ).append($("<img src='http://www.tutorialspoint.com/images/html.gif' alt=''/>\
                                              <h2>$52</h2>\
                                              <p>Easy Polo Black Edition</p>\
                                               <a href='#' class='btn btn-default add-to-cart'>\
                                               <i class='fa fa-shopping-cart'></i>Add to cart</a>"))
                $("#singlePro"+numbers[num] ).append($("<div class='product-overlay' id='productOverlay"+numbers[num] +"'></div>"))
                $("#productOverlay"+numbers[num] ).append($("<div class='overlay-content' id='overlayContent" + numbers[num] + "'></div>"))
                $("#overlayContent"+numbers[num] ).append($("<h2>$66</h2><p>Easy Polo Black Edition</p><a href='#' class='btn btn-default add-to-cart'><i class='fa fa-shopping-cart'></i>Add to cart</a>"))

                $("#img-wrap" + numbers[num]).append($("<div class='choose' id='chse"+ numbers[num]+"'></div>"))
                $("#chse"+numbers[num] ).append($("<ul class='nav nav-pills nav-justified'>\
                                            <li><a href=''><i class='fa fa-plus-square'></i>Add to wishlist</a></li>\
                                                <li><a href=''><i class='fa fa-plus-square'></i>Add to compare</a></li>\
                                        </ul>\
                                        "))
                num += 1;
            });
        });

Demo : http://code.reloado.com/ovetig3/edit#preview

这篇关于如何在jQuery中创建多个sub div标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！