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

【问题标题】：Insert an element in between divs that have the same class在具有相同类的 div 之间插入一个元素
【发布时间】：2013-02-27 19:23:40
【问题描述】：

我有一个具有这种结构的页面 :: 连续的 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（例如，unique） 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>

【问题讨论】：

你能在这些带有 ID 的 div 中添加一个类选择器吗？比如<div id = 'onediv' class='childdiv'></div>和<div id = 'twodiv' class='childdv'></div>等等

标签： javascript jquery html

【解决方案1】：

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

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

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

【讨论】：

@VisionN .. 你能解释一下函数内的语句是做什么的吗？
@Mellkor $("<div />", { id: "unique" }) 创建新的<div> 元素，将id 设为"unique"，并将其插入到被点击元素的父节点之后。

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试这个代码：

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

【讨论】：

【解决方案4】：

试试这个

示例：

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

必填

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

【讨论】：