单击按钮时如何将动态创建的div附加到当前的mainDiv中，而不是全部mainDiv中

Question

我试图在单击按钮时将<div> <div class='mainDiv'>到当前<div class='mainDiv'> 。 现在，克隆后将其appendTo所有class='mainDiv' ＆。 我只需要当前单击的<div> 。 有人可以帮我解决吗？

 (function($) { function div2() { $('<div/>').addClass('div2').text('This is a Content').appendTo('.mainDiv'); } function cloneIt() { $('.mainDiv').clone().detach().appendTo('body'); } $(document).on('click', '.div1', function() { div2(); }); $(document).on('click', 'span', function() { cloneIt(); }); })(jQuery); 

 body { display: flex; justify-content: space-around; } .mainDiv { background-color: #000; width: 100px; height: 100px; color: #fff; padding: 20px; margin-left: 15px; margin-right: 15px; } .div1 { background-color: blue; padding: 10px; cursor: pointer; } .div2 { background-color: red; padding: 10px; } span { display: block; padding: 10px; background-color: green; margin-bottom: 15px; cursor: pointer; } 

 <div class="mainDiv"> <span>Clone it</span> <div class="div1">click to append div</div> </div> 

Answer 1

您可以使用$(this)获取当前元素bu，然后使用$(this).parent()获取父$(this).parent() ，并将其作为参数发送给函数div2($(this).parent()); 并使用它而不是使用类选择器

  function div2(item) {
    $('<div/>').addClass('div2').text('This is a Content').appendTo(item);
  }

查看代码段：

 (function($) { function div2(item) { if (item.has(".div2").length <= 0) { $('<div/>').addClass('div2').text('This is a Content').appendTo(item); } } function cloneIt() { $('.mainDiv').clone().detach().appendTo('body'); } $(document).on('click', '.div1', function() { div2($(this).parent()); }); $(document).on('click', 'span', function() { cloneIt(); }); })(jQuery); 

 body { display: flex; justify-content: space-around; } .mainDiv { background-color: #000; width: 100px; height: 100px; color: #fff; padding: 20px; margin-left: 15px; margin-right: 15px; } .div1 { background-color: blue; padding: 10px; cursor: pointer; } .div2 { background-color: red; padding: 10px; } span { display: block; padding: 10px; background-color: green; margin-bottom: 15px; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mainDiv"> <span>Clone it</span> <div class="div1">click to append div</div> </div> 

Answer 2

我不知道我是否以正确的方式理解了您的问题，但是克隆当前单击的div可以像这样解决

 (function($){ $(document).on('click', '.mainDiv > div', function(){ $(this).closest('.mainDiv').append($(this).clone(true)); }); })(jQuery); 

 body { display: flex; justify-content: space-around; } .mainDiv { background-color: #000; width: 100px; /* height: 100px; */ color: #fff; padding: 20px; margin-left: 15px; margin-right: 15px; } .div1 { background-color: blue; padding: 10px; cursor: pointer; } .div2 { background-color: red; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="mainDiv"> <div class="div1">DIV 1</div> <div class="div2">DIV 2</div> </div> 

Answer 3

您可以使用以下命令将新创建的div添加到正确的.mainDiv

 (function($) { function div2(el) { $('<div/>').addClass('div2').text('This is a Content').appendTo(el); } function cloneIt() { $('.mainDiv').clone().detach().appendTo('body'); } $(document).on('click', '.div1', function() { var el = $(this).parent('.mainDiv'); div2(el); }); $(document).on('click', 'span', function() { cloneIt(); }); })(jQuery); 

 body { display: flex; justify-content: space-around; } .mainDiv { background-color: #000; width: 100px; height: 100px; color: #fff; padding: 20px; margin-left: 15px; margin-right: 15px; } .div1 { background-color: blue; padding: 10px; cursour: pointer; } .div2 { background-color: red; padding: 10px; } span { display: block; padding: 10px; background-color: green; margin-bottom: 15px; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mainDiv"> <span>Clone it</span> <div class="div1">click to append div</div> </div> <div class="mainDiv"> <span>Clone it</span> <div class="div1">click to append div</div> </div> <div class="mainDiv"> <span>Clone it</span> <div class="div1">click to append div</div> </div>