Jquery：如何获取元素的父 div 并克隆它？

Question

On the click of addField_1 button, I have to clone the container div(id = 'projection') and append it right below it.

I am doing this in jquery like this:

 $('[id^="addField"]').click(() => { var containerDiv = $(this).parent(); console.log(containerDiv.attr('id')); containerDiv.after(containerDiv.clone()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row" id="projection" > <select class="form-control" aria-placeholder="Select field"></select> <button type="button" class="btn btn-light" id="addField_1" name="mybutton">+</button> </div>

There is no error when the button is clicked. But the div is not being copied. I also tried to log the parent div's id. It is also undefined. Please tell me what am I doing wrong.

Answer 1

Notice that you have used arrow function because of which this is referring to the window .

There are two solutions for it :

1. Using event.target in the arrow function to get the targeted element.

 $('[id^="addField"]').click((event) => { let containerDiv = $(event.target).parent(); console.log(containerDiv.attr('id')); containerDiv.after(containerDiv.clone()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row" id="projection" > <select class="form-control" aria-placeholder="Select field"></select> <button type="button" class="btn btn-light" id="addField_1" name="mybutton">+</button> </div>

---

2. To not use arrow function but anonymous function and use this :

 $('[id^="addField"]').click(function() { let containerDiv = $(this).parent(); console.log(containerDiv.attr('id')); containerDiv.after(containerDiv.clone()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row" id="projection" > <select class="form-control" aria-placeholder="Select field"></select> <button type="button" class="btn btn-light" id="addField_1" name="mybutton">+</button> </div>

Answer 2

With this keyword, you will reference to Window object.

That why you should use something like that:

$('[id^="addField"]').on('click', event =>  {
  const parentDiv = $(event.target).closest('.row');
  console.log(parentDiv.html());
});