Как обернуть все элементы в каждом контейнере

Question

Мне нужно wrapAll divs, которые являются дочерними элементами li, кроме div с классом A. Также необходимо сохранить их в своих родительских li.

Текущий HTML:

<ul class="container"> 
<li> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
</li> 

<li> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
</li> 
</ul> 

Желаемый результат:

<ul class="container"> 
<li> 
    <div class="a"></div> 
    <div class="wrapped"> 
    <div class="b"></div> 
    <div class="c"></div> 
    </div> 
</li> 

<li> 
    <div class="a"></div> 
    <div class="wrapped"> 
     <div class="b"></div> 
     <div class="c"></div> 
    </div> 
</li> 
</ul> 

Мысль этот код будет сделать это, но он не работает. Я хотел бы использовать переменный для определения выбранной дивы:

var selected = $("li").children().not(".a"); 
$(selected).each(function() { 
    $(selected).wrapAll($("<div class='wrapped'></div>")); 
}); 

Answer 1

итерации по каждым li, а затем обернуть это дети, которые не имеют класса a. wrapAll обернет все возможные согласованные элементы, чтобы он также обернул согласованные элементы из других li.

$('li').each(function() { 
 
    $(this).children().not('.a').wrapAll('<div class="wrapped"></div>'); 
 
});

.wrapped { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="container"> 
 
    <li> 
 
    <div class="a">A</div> 
 
    <div class="b">B</div> 
 
    <div class="b">B</div> 
 
    </li> 
 

 
    <li> 
 
    <div class="a">A</div> 
 
    <div class="b">B</div> 
 
    <div class="b">B</div> 
 
    </li> 
 
</ul>