Добавить новый родительский 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 

M Проблема заключается в том, что родительский div создается, но не брат 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); 
}); 

Example fiddle

Answer 2

Выполните следующие действия, чтобы получить результат

$(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); 
}); 

}); 

Fiddle

Answer 3

• Вы не закрыли свою петлю правильно (проверьте скобки).
• Вы должны указать HTML DIVs как строки.
• Использование «каждого» подразумевает, что вы используете , чтобы применить этот метод к нескольким элементам. В этом случае вы должны работать с классами вместо идентификаторов в HTML-файлах DIV, так как идентификаторы должны существовать ровно один раз в DOM.
• Вы неправильно обращались к своему родительскому DIV (см. Мой подход).

http://jsfiddle.net/1yn8qgg3 (CSS с цветом фона, чтобы визуально обозначить DIVs)

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

Надеется, что это помогает.