时间戳

首页 > 解决方案 > Jquery：如何获取元素的父 div 并克隆它？

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

问题描述

单击 addField_1 按钮时，我必须克隆容器 div(id = 'projection') 并将其附加到它的正下方。

我这样做是jquery这样的：

$('[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>

单击按钮时没有错误。但是 div 没有被复制。我还尝试记录父 div 的 ID。它也是未定义的。请告诉我我做错了什么。

标签： javascripthtmljquery

解决方案

请注意，您使用了箭头功能，因为它this指的是window.

有两种解决方案：

1. 使用event.target箭头函数获取目标元素。

$('[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.不使用箭头函数而是匿名函数并使用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>

推荐阅读