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 的父级和 之间放置一个 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);
});

请注意，“独特”应该是真正独特的东西。

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