Использование jQuery аккордеона со странной разметкой

Question

У меня есть эта структура HTML и вы хотите преобразовать ее в аккордеон.

<div class="accor"> 
    <div class="section"> 
     <h3>Sub section</h3> 
     <p>Sub section text</p> 
    </div> 
    <div class="section"> 
     <h3>Sub section</h3> 
     <p>Sub section text</p> 
    </div> 
    <div class="section"> 
     <h3>Sub section</h3> 
     <p>Sub section text</p> 
    </div> 
</div> 

В основном с помощью h3 S в качестве заголовков аккордеона, а остальная часть контента в каждом div.section в качестве содержимого для каждой панели аккордеона. (Также обратите внимание: заголовки могут быть любыми между h2 и h6, в зависимости от их гнездования).

я понял, что это было бы проще, если дерево DOM было реорганизовано так h3 s были вне каждый div, так что это как гармошка работает по умолчанию:

<h3>Sub section</h3> 
    <div class="section"> 
     <p>Sub section text</p> 
    </div> 

Единственная проблема заключается в том: как переместить заголовки вокруг? (У меня нет доступа к изменению HTML).

var $sections = $("div.accor > .section"), 
    $headings = $sections.find("> :header") 
; 
// I figured that inserting each heading to be before its parent might 
// be the answer: 
$headings.insertBefore($headings.find(":parent")); 

// ... but that doesn't do anything 

Answer 1

А, я нашел решение.

Использование $.each()

$headings.each(function(i, el) { 
    var $this = $(el), $p = $this.parent(); 
    $this.insertBefore($p); 
}); 

Есть ли лучшее решение, чем это, правда? Возможно, просто используя варианты ванильного аккордеона?

Answer 2

Как об этом:

$('.accor .section').each(function() { 
    $('h3', this).insertBefore($(this)); 
});