Javascript 查找最近的元素并在元素之前插入

我有三个按钮可以克隆

div

，它会在单击按钮之前显示

div

。当前，单击按钮时，

div

将出现在所有三个按钮之前。我需要点击按钮，仅在点击按钮之前插入

div

var toAppend=$（'#appendFullWidthAll'）.children（）；
$（'#showContent'）。单击（函数（）{
toAppend.clone（）.insertBefore（'.show'）；
});


测试内容
测试内容
测试内容
测试内容

点击这里
点击这里
点击这里
您正在插入类为show

的任何元素之前，这是您的主要问题。解决方案是使用

$（this）

选择器捕获您单击的元素，如下所示：

$('.btn').click(function() {
    toAppend.clone().insertBefore($(this));
});

---

首先，HTML中的ID必须是唯一的。现在，要对引发事件的元素应用任何操作，请在事件内部使用关键字

this

。但是请记住，

this

是一个JavaScript关键字，因此使用

$（this）

将其转换为jQuery：

var toAppend=$（'#appendFullWidthAll'）.children（）；
$（'.show'）。单击（函数（）{
toAppend.clone（）.insertBefore（this）；
});


测试内容
测试内容
测试内容
测试内容

点击这里
点击这里
点击这里
您可以使用
$（此）
选择器在
单击事件侦听器中获取您单击的元素。另外，不要对多个元素使用相同的
id
属性，我已使用
show
类选择器替换了
click
侦听器，而不是使用
id
属性的错误侦听器。检查下一个示例：


$（文档）.ready（函数（）
{
var toAppend=$（'#appendFullWidthAll'）.children（）；
$（'.show'）。单击（函数（）
{
var clickedButton=$（此）
toAppend.clone（）.insertBefore（单击按钮）；
});
});


测试内容
测试内容
测试内容
测试内容

点击这里
点击这里
点击这里
请不要使用同一id三次。对于HTML页面，元素的id必须是唯一的。
请用这种方法来实现你的目标

var toAppend = $('#appendFullWidthAll').children();

$('.btn.show').click(function() {
   const clickedButton = $(this);
   toAppend.clone().insertBefore(clickedButton);
});

在一个页面上有多个ID是无效的HTML。将它们改为类，或者使用不同的id。这里有一些问题，首先是不要使用相同的id，如果你真的需要一组元素，请使用类。因此，在这里，如果您将每个按钮id更改为showContent1、showContent2和showContent3以及$（'.btn'）。单击（…这将起作用。您不需要在此上下文中将
this
转换为jQuery，因为
insertBefore（）
方法也将采用
this
。