How To Create Multiple Sub Div Tags In Jquery
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 pla
Solution 1:
just make changes to you script
$.each(numbers, function () {
$(".product-loop").append("<divclass='col-sm-4'id='col" +numbers[num] + "'></div>")
$("#col" + numbers[num]).append($("<divclass='product-image-wrapper'id='img-wrap" + numbers[num] + "'></div>"))
$("#img-wrap" + numbers[num]).append($("<divclass='single-products'id='singlePro" + numbers[num] + "'></div>"))
$("#singlePro" + numbers[num]).append($("<divclass='productinfo text-center'id='productCentre" + numbers[num] + "'></div>"))
$("#productCentre" +numbers[num] ).append($("<imgsrc='http://www.tutorialspoint.com/images/html.gif'alt=''/>\
<h2>$52</h2>\
<p>Easy Polo Black Edition</p>\
<ahref='#'class='btn btn-default add-to-cart'>\
<iclass='fa fa-shopping-cart'></i>Add to cart</a>"))
$("#singlePro"+numbers[num] ).append($("<divclass='product-overlay'id='productOverlay"+numbers[num] +"'></div>"))
$("#productOverlay"+numbers[num] ).append($("<divclass='overlay-content'id='overlayContent" + numbers[num] + "'></div>"))
$("#overlayContent"+numbers[num] ).append($("<h2>$66</h2><p>Easy Polo Black Edition</p><ahref='#'class='btn btn-default add-to-cart'><iclass='fa fa-shopping-cart'></i>Add to cart</a>"))
$("#img-wrap" + numbers[num]).append($("<divclass='choose'id='chse"+ numbers[num]+"'></div>"))
$("#chse"+numbers[num] ).append($("<ulclass='nav nav-pills nav-justified'>\
<li><ahref=''><iclass='fa fa-plus-square'></i>Add to wishlist</a></li>\
<li><ahref=''><iclass='fa fa-plus-square'></i>Add to compare</a></li>\
</ul>\
"))
num += 1;
});
});
Solution 2:
Theres quite a lot of bad stuff going on here, id's are supposed to be unique so 6 '#productCentres' are definitely not doing you any favours.
I'm guessing that they were supposed to be in the 'product-loop' container which you missed with;
insertAfter(".product-loop")
I'm also thinking that;
$(".product-loop div:eq(0)")
was intended to tag the cart option buttons to the end of each product but since the insertAfter dumped them outside it never matched the selector.
For my own sanity I expanded the insane .each call to a function so you can better see each element being built and modify their styles/attributes as needed
I didnt include the CSS since that pushes the code sample over the character limit but i would suggest using the code below adding some padding to '.productCentre' will give you those missing gutters
functionnewProduct(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));
});
});<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script><section><divclass="container"><divclass="row"><divclass="col-sm-9 padding-right"><divclass="features_items"><!--features_items--><h2class="title text-center">Features Items</h2><divclass="product-loop"></div></div><!--features_items--></div></div></div></section>Solution 3:
Like @Evil Saied, you have some problems in your code. The worst is the duplicates ids.
If I understand you correctly, the relevant problem is that you added the classes to the wrong element (.product-image-wrapper for example).
The problem
$("#col").append($("<div></div>")).addClass("product-image-wrapper").attr("id","img-wrap")
You can see that the class product-image-wrapper added to the #col but not to the new div that you just create.
The solution
$("#col").append($("<div></div>").addClass("product-image-wrapper").attr("id","img-wrap"));
In other words, you need to move the ) to the end.
I removed the not relevent part of the css so I could create is as snippet, in the future, please include only the relevant code so it will easier for us to help you.
$(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;
}
ulli {
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: 5px10px;
background: #FE980F;
color: #FFF;
-webkit-animation: bounce 2s ease infinite;
animation: bounce 2s ease infinite;
}
a#scrollUpi{
font-size: 30px;
}<linkrel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><section><divclass="container"><divclass="row"><divclass="col-sm-9 padding-right"><divclass="features_items"><!--features_items--><h2class="title text-center">Features Items</h2><divclass="product-loop"></div></div><!--features_items--></div></div></div></section>
Post a Comment for "How To Create Multiple Sub Div Tags In Jquery"