cool rock cool rock - 3 months ago 11
HTML Question

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
there is place between two image and add wish bottom

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

there is no place between two image and no add wish bottom

Answer

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;
}

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>

http://output.jsbin.com/pawoce

Comments