Оберните вокруг определенного div

Question

Я пробовал Wrap и WrapALl, а также nextUntil, но его довольно сложный этот. У меня есть этот HTML

     <ul class="quick-list quick-glance hideOnSearch show-for-medium-up"> 
       <li><span class="strong">Price:</span> $198000</li> 
       <li><span class="strong">Miles:</span> 349999</li> 
       <li><span class="strong">Vehicle Type:</span> Minivans and Vans</li> 
     </ul> 

и я хочу, чтобы это выглядело как

<ul class="accordion show-for-small hide-for-medium-up"> 
     <li> 
       <div class="title">TITLE</div> 
       <div class="content"> 
        
          <ul class="quick-list quick-glance hideOnSearch show-for-medium-up"> 
            <li><span class="strong">Price:</span> $198000</li> 
            <li><span class="strong">Miles:</span> 349999</li> 
            <li><span class="strong">Vehicle Type:</span> Minivans and Vans</li> 
          </ul> 
        
       </div> 
     </li> 
    </ul> 

Я попробовал этот

$('ul.quick-list').wrapAll('<ul class="accordion"><li><div class="title">TITLE</div><div class="content"></div></li></ul>'); //Single page Top accordion 

Но он помещает в неправильных местах quick-list.

Как это сделать с помощью jQuery?

Answer 1

Обертка() поддерживает только один внутренний элемент, у вас есть два. Решение:

$('ul.quick-list').wrap('<ul class="accordion"><li><div class="content"></div></li></ul>'); 
$('.content').before('<div class="title">TITLE</div>'); 

Смотрите пример: http://jsfiddle.net/powtac/HzDCD/1/

Answer 2

попробовать это DEMO

$(function(){ 
$('ul.quick-list').wrap('<ul class="accordion show-for-small hide-for-medium-up">').wrap("<li>").wrap('<div class="content">'); 

$('.content').before('<div class="title">TITLE</div>'); 
});