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 的父级和之间使用div（例如唯一） twodiv 的父母。

然后结构变为：

<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"应该有真正唯一的东西。

DEMO： 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>')
})

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

4 个答案: