javascript - 单击按钮时如何将动态创建的 div 附加到当前 mainDiv 而不是所有 mainDiv

Question

我正在尝试附加到 <div>进入当前 <div class='mainDiv'>单击按钮时。现在它附加到所有 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() 获取父元素并将其作为参数发送给函数 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>