JQuery, добавляющий несколько divs

Question

У меня проблема, вот оно, у меня есть текст в div, который генерируется динамически, поэтому я хочу обернуть его внутри div для дальнейшего стилизации, и когда я оберну его внутри div, Я хочу добавить div перед ним для изображения. когда я запускаю код я написал, я вижу несколько див получения генерироваться

var pageInitialized = false; 
$(function() { 
if (pageInitialized) return; 
pageInitialized = true; 

$('.entry-content').each(function(i, v) { 
    $(v).contents().wrap("<div class='alert_content'></div>"); 
}); 

$('.alert_content').each(function(i, v) { 
    $(v).before("<div class='error_image'></div>"); 
}); 

[![The output is as follows int he image][1]][1]}); 

Answer 1

Я думаю, что проблема $(v).contents().wrap("<div class='alert_content'></div>"); которая компресс каждый ребенок entry-content с alert_content. Вместо этого, если вы хотите один alert_content для entry-content затем использовать wrapInner() как

$('.entry-content').each(function(i, v) { 
 
    $(v).wrapInner("<div class='alert_content'></div>"); 
 
}).prepend("<div class='error_image'></div>"); 
 

 
//$('.alert_content').before("<div class='error_image'></div>");

.entry-content { 
 
    padding: 5px; 
 
    margin-bottom: 5px; 
 
    border: 1px solid grey; 
 
} 
 
.alert_content { 
 
    padding: 5px; 
 
    margin-bottom: 5px; 
 
    background-color: lightblue; 
 
} 
 
.error_image { 
 
    padding: 5px; 
 
    margin-bottom: 5px; 
 
    background-color: lightyellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="entry-content"> 
 
    <div>div</div> 
 
    <input />text 
 
</div> 
 

 
<div class="entry-content"> 
 
    <div>div</div> 
 
    <input />text 
 
</div> 
 

 
<div class="entry-content"> 
 
    <div>div</div> 
 
    <input />text 
 
</div>

Answer 2

Я думаю, что это должно быть, как это

$('.entry-content').each(function(i, v) { 
    $($(this).html()).wrap("<div class='alert_content'></div>"); 
}); 

$('.alert_content').each(function(i, v) { 
    $(this).before("<div class='error_image'></div>"); 
});