0
這裏是工作的代碼，這樣我想 http://code.reloado.com/adudeq/7/edit輸出 
如何在jQuery中創建多個子div標籤
--see PIC我嘗試使用jQuery得到同樣的事情，但這裏的問題是存在的是兩個影像和無添加的願望之間沒有發生在底部
http://code.reloado.com/exesox4/3/edit#preview
A
回答
0
只是讓你修改腳本
$.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;
});
});
0
的Theres相當多的壞的東西會在這裏，ID是應該是唯一的，這樣6「#productCentres」是絕對不會做你任何好處。
我猜測，他們應該是在你錯過了與「產品環」容器;
insertAfter(".product-loop")
我也在想;
$(".product-loop div:eq(0)")
旨在標記的購物車選項按鈕到每個產品的終結，而是因爲insertAfter傾倒他們外面從來不匹配的選擇。
對於我自己的理智我擴大了瘋狂。每次調用一個函數，所以你可以更清楚地看到正在興建的每個元素，並修改自己的風格/屬性需要
我沒有包括CSS，因爲這推動代碼示例在字符的限制，但我會建議使用下面添加一些填充到「.productCentre」的代碼會給你那些缺少排水溝
function newProduct(id) {
product = document.createElement("div");
product.setAttribute('class', 'productCentre col-sm-4 product-image-wrapper single-products productinfo text-center');
product.setAttribute('id', id);
productImg = document.createElement("img");
productImg.setAttribute('src', 'http://www.tutorialspoint.com/images/html.gif');
product.appendChild(productImg);
productPrice = document.createElement("h2");
productPrice.innerHTML = ('$52');
product.appendChild(productPrice);
productLabel = document.createElement("p");
productLabel.innerHTML = ('Easy Polo Black Edition');
product.appendChild(productLabel);
productCartBtn = document.createElement("a");
productCartBtn.class = ("btn btn-default add-to-cart");
productCartBtn.setAttribute("href", '#');
productCartBtn.innerHTML = '<i class="fa fa-shopping-cart"></i>Add to cart';
product.appendChild(productCartBtn);
productChoose = document.createElement("div");
productChoose.setAttribute('class', "choose");
productChooseList = document.createElement('ul');
productChooseList.setAttribute('class', 'nav nav-pills nav-justified');
productChooseListElement = document.createElement('li');
productChooseListElement.innerHTML = '<a href=""><i class="fa fa-plus-square"></i>Add to compare</a>';
productChooseList.appendChild(productChooseListElement);
productChooseListElement.innerHTML = '<a href=""><i class="fa fa-plus-square"></i>Add to wishlist</a>';
productChooseList.appendChild(productChooseListElement);
productChoose.appendChild(productChooseList);
product.appendChild(productChoose);
return product;
}
$(function() {
var numbers = [1, 2, 3, 4, 5, 6];
$.each(numbers, function(index) {
$(".product-loop").append(newProduct(index));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section>
<div class="container">
<div class="row">
<div class="col-sm-9 padding-right">
<div class="features_items">
<!--features_items-->
<h2 class="title text-center">Features Items</h2>
<div class="product-loop">
</div>
</div>
<!--features_items-->
</div>
</div>
</div>
</section>
0
大號ike @Evil Saied，你的代碼有一些問題。最糟糕的是副本id s。
如果我理解正確的話，相關的問題是，你添加的類錯誤的元素（.product-image-wrapper爲例）。
問題
$("#col").append($("<div></div>")).addClass("product-image-wrapper").attr("id","img-wrap")
可以看出，類product-image-wrapper加入#col而不是新的div您剛剛創建。
解決方案
$("#col").append($("<div></div>").addClass("product-image-wrapper").attr("id","img-wrap"));
換句話說，你需要將)移動到結束。
我刪除了CSS，進而創造是片斷的不培訓相關的部分，在未來，請只包括相關的代碼，因此它會更容易讓我們來幫助你。
$(function(){
var numbers = [1,2,3,4,5,6];
$.each(numbers,function(){
$("<div></div>").addClass("col-sm-4").attr("id","col").insertAfter(".product-loop");
$("#col").append($("<div></div>").addClass("product-image-wrapper").attr("id","img-wrap"));
$("#img-wrap").append($("<div></div>").addClass("single-products").attr("id","singlePro"));
$("#singlePro").append($("<div></div>").addClass("productinfo text-center").attr("id","productCentre"));
$("#productCentre").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>')
$(".product-loop div:eq(0)").after("<div></div>").addClass("choose").attr("id","chse");
$("#chse").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>');
});
});@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700,100);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,300,600,700);
@import url(http://fonts.googleapis.com/css?family=Abel);
.product-image-wrapper {
border: 1px solid #F7F7F5;
overflow: hidden;
margin-bottom: 30px;
}
body {
font-family: 'Roboto', sans-serif;
background:;
position: relative;
font-weight:400px;
}
ul li {
list-style: none;
}
a:hover {
outline: none;
text-decoration:none;
}
a:focus {
outline:none;
outline-offset: 0;
}
a {
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto', sans-serif;
}
.btn:hover,
.btn:focus{
outline: none;
box-shadow: none;
}
.navbar-toggle {
background-color: #000;
}
a#scrollUp {
bottom: 0px;
right: 10px;
padding: 5px 10px;
background: #FE980F;
color: #FFF;
-webkit-animation: bounce 2s ease infinite;
animation: bounce 2s ease infinite;
}
a#scrollUp i{
font-size: 30px;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section>
<div class="container">
<div class="row">
<div class="col-sm-9 padding-right">
<div class="features_items">
<!--features_items-->
<h2 class="title text-center">Features Items</h2>
<div class="product-loop">
</div>
</div>
<!--features_items-->
</div>
</div>
</div>
</section>+0
謝謝，但你能解釋的錯誤） –
+0
是的，我已經做到了。閱讀「問題」部分。 –
相關問題
- 1. 如何創建多個div標籤
- 2. 如何在android中創建子標籤？
- 3. 使用jQuery創建多個div盒子
- 4. Gnuplot：如何創建多個x標籤
- 5. 通過DOM在div中創建多個img標籤
- 6. 在div中創建多個音頻標籤並播放MP3
- 7. 如何爲多個子圖創建單個x軸標籤和y軸標籤？
- 8. jQuery的如何包裝多個標籤在一個DIV
- 9. 如何創建onclick div在多個div上重疊使用jquery
- 10. 創建多個Git標籤
- 11. 創建多個自定義div div jquery
- 12. 如何在離子科爾多瓦創建標籤內容？
- 13. 如何在Liquibase中每天創建多個標籤？
- 14. 如何在Tkinter的Button小部件中創建多個標籤？
- 15. 用jQuery標籤打開多個div
- 16. 動態創建使用jquery創建四個子div後的單個div中的多個div
- 17. Neo4j查詢：如何在標籤中構建多個標籤？
- 18. 如何使用jquery在div標籤中添加span標籤？
- 19. 如何將多個div標籤對齊
- 20. 如何在css div中創建圈子？
- 21. 控制如何在jQuery中創建div
- 22. 如何在Jquery中動態創建div？
- 23. 如何添加更多的div在一個盒子div與標籤？
- 24. 如何在一個div標籤中執行多個backrounds？
- 25. 如何在jQuery中獲取圖片大小，在div標籤之間動態創建img標籤？
- 26. 如何在pyGTK中創建onMouseOver標籤？
- 27. 如何在SharePoint中創建標籤雲？
- 28. 在第一個標籤中的一些div後動態創建標籤
- 29. 如何在div中設置p標籤，在td標籤中設置div標籤
- 30. 循環創建多個div元素？ JQUERY
我們不可能在沒有看到更多上下文的情況下爲您提供幫助。你可以在這裏發佈你的實際代碼嗎？[描述你試過的東西]（http://whathaveyoutried.com）？一定還要檢查[問題清單]（http://meta.stackoverflow.com/questions/156810/stack-overflow-question-checklist）。謝謝！ –
點擊鏈接，有代碼 –