Обтекание HTML внутри div с помощью jQuery

Question

Мне нужно ввести некоторую разметку html внутри моей html-страницы с помощью jQuery.

Мне нужно, чтобы объемный выделенный желтый код ниже с <div class="section"> ... </div>.

Так что мне нужно что-то вроде этого:

<div class="section"> 
    <div>...</div> 
    <div>...</div> 
    <div>...</div> 
    <div>...</div> 
    <div>...</div> 
</div> 

За то, что я использую идентификатор (выделено зеленым цветом) и parent и before или append метод.

Проблема: при использовании before или append методы, JQuery всегда самостоятельно закрыть теги, так что я в конечном итоге с <div class="section"></div> ...

Любая идея, как поступить? Благодарю.

Answer 1

Использование .nextUntil() для целевой дивы между ними и оберните раздел с помощью .wrapAll()

$('div[id^=320]').nextUntil("div[id^=760]").add("div[id^=320], div[id^=760]").wrapAll('<div class="section"></div>');

.section { 
 
    background-color: yellow; 
 
}

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

 
<div>...</div> 
 
<div>...</div> 
 
<div id="320">...</div> 
 
<div>...</div> 
 
<div>...</div> 
 
<div>...</div> 
 
<div id="760">...</div> 
 
<div>...</div>

Answer 2

$('.wcustomhtml').each(function(){ 
    $(this).parent().wrap('<div class="section"></div>'); 
}) 

Я не уверен, если только выделенные элементы имеют этот класс, если нет, вам нужно дать им некоторый класс, чтобы идентифицировать их, а затем каждый() их и wrap() их родителя.

надеюсь, что это поможет