添加新的父div，然后在此父div中添加下一个div

Question

我想做一个简单的操作，但是我不明白为什么它不起作用我有一个div：

<input type='button' value='validate' class='popupjq'>

我想向此输入添加一个父div，并为此添加一个“兄弟” div：

<div id = 'id_parent'>
   <input type='button' value='validate' class='popupjq'>
   <div id = 'id_brother'></div>
</div>

所以我用这个javascript：

$(".popupjq").each(function() {
    var divParent = $("<div id = 'id_parent' style='display:inline-block; position:relative;'>");
    var divCache = $("<div id='toto'>");
    $(this).wrap(divParent);
    $(divParent).append(divCache);
});//bracket missing

我的问题是父div是create而不是brother div。

Answer 1

您可以使用insertAfter()将第二个元素放在所需的位置：

$(".popupjq").each(function() {
    $(this).wrap('<div id="id_parent" style="display: inline-block; position: relative;"></div>');
    $('<div id="toto"></div>').insertAfter(this);
});

小提琴的例子

Answer 2

• 您尚未正确关闭每个循环（选中方括号）。
• 您应该将DIV的HTML指定为字符串。
• 使用“每个”意味着您打算将此方法应用于多个元素。 在这种情况下，您应该使用类而不是DIV的HTML中的ID，因为ID应该在DOM中恰好存在一次。
• 您没有正确处理父级DIV（请参阅我的方法）。

http://jsfiddle.net/1yn8qgg3 （带有背景颜色的CSS，用于在视觉上标记DIV）

$(".popupjq").each(function() {
  var divParent = "<div class='class_parent'></div>";
  var divCache = "<div class='class_toto'></div>";
  $(this).wrap(divParent);
  $(this).parent().append(divCache);
});

希望这可以帮助。

Answer 3

执行以下操作以获得结果

$(function(){
$(".popupjq").each(function() {
    var divParent = $("<div id = 'id_parent' style='display:inline-block; position:relative;'> </div>");
    var divCache = $("<div id='toto'> </div>");
    $(this).wrap(divParent);
    $(this).append(divCache);
});

});

小提琴