javascript - 在具有相同类的 div 之间插入一个元素

Question

我有一个具有这种结构的页面 :: 连续的 div 具有相同的类，但它的每个子 div 都有一个唯一的 id。

<div class = 'samediv'>
    <div id = 'onediv'></div>
</div>
<div class = 'samediv'>
    <div id = 'twodiv'></div>
</div>
<div class = 'samediv'>
    <div id = 'thirddiv'></div>
</div>

现在单击唯一的 div，如何在其父级之后插入另一个 div/元素。

例如，在单击onediv时，我希望在onediv的父级和twodiv的父级之间有一个 div （例如，unique）。

然后结构变为：

<div class = 'samediv'>
    <div id = 'onediv'></div>
</div>
<div id = "unique">
</div>
<div class = 'samediv'>
    <div id = 'twodiv'></div>
</div>
<div class = 'samediv'>
    <div id = 'thirddiv'></div>
</div>

Answer 1

$(".samediv > div").on("click", function() {
    $("<div />", { id: "unique" }).insertAfter(this.parentNode);
});

请注意，"unique"应该有一些真正独特的东西。

演示：http: //jsfiddle.net/4MRwZ/

Answer 2

$("div.samediv > div").click(function(){
     $(this).parent().after("<div id='unique'></div>");
});

Answer 3

试试这个代码：

$('.samediv').click(function(){
   $(this).parent().after('<div id = "unique"> </div>');
});

Answer 4

试试这个

例子 ：

$("#onediv").click(function () {
    $(this).parent().append('<div id = "unique"></div>')
})

必需的

$(".samediv > div").click(function () {
    $(this).parent().append('<div id = "unique"></div>')
})