在单击时，如何使用分离类别的divs Append Divs

Question

我有一个带有链接的div。正如您在摘要中看到的那样，单击链接时，它附加了一个新的div。它正在工作！

但是我想要的是，当每次链接单击时，都应动态地添加一个新的独立类。

 $(".click").click(function () {
  $(".container").append('<div class="project-list"><div class="projects-name"> div1</div><div class="project-box">Content</div></div>');
});

.container{
  width:100%
  }
 .project-list{
   width:100px;
   background:#e8e8e8;
   border-radius:5px;
   padding:10px 20px;
   display:inline-block;
   margin:8px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  
      <div class="project-list">
         <div class="projects-name"> div1</div>
          <div class="project-box">Content</div>                             
           <div class="ProjectSetting">
              <a class="click" href="#">click</a>
            </div>                         
       </div>
   
</div>

如果尚不清楚，请在下面问我。

Answer 1

 var i=0;
 $(".click").click(function () {
 i++;
 var toAppend = '<div class="project-list newClass'+i+'"><div class="projects-name"> div1 [newClass'+i+']</div><div class="project-box">Content</div></div>';
 
  $(".container").append(toAppend);
});

.container{
  width:100%
  }
 .project-list{
   width:100px;
   background:#e8e8e8;
   border-radius:5px;
   padding:10px 20px;
   display:inline-block;
   margin:8px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  
      <div class="project-list">
         <div class="projects-name"> div1</div>
          <div class="project-box">Content</div>                             
           <div class="ProjectSetting">
              <a class="click" href="#">click</a>
            </div>                         
       </div>
   
</div>