Utilizzo della fisarmonica jQuery con markup strano

Question

Ho questa struttura HTML e voglio convertirla in una fisarmonica.

<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>

Fondamentalmente usando i h3 come intestazioni di fisarmonica e il resto del contenuto in ogni div.section come contenuto per ciascun pannello di fisarmonica. (Nota anche: le intestazioni potrebbero essere qualsiasi tra h2 e h6, a seconda del loro annidamento).

Ho pensato che sarebbe stato più semplice se l'albero DOM fosse stato ristrutturato, quindi i h3 erano al di fuori di ogni div dato che la fisarmonica funziona di default:

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

L'unico problema è: come spostare le intestazioni? (Non ho accesso per modificare l'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

Ah, ho trovato la soluzione.

Uso di $.each()

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

Esiste una soluzione migliore di questa, però? Forse stai semplicemente usando le opzioni per la fisarmonica alla vaniglia?

Answer 2

Che ne dici di questo:

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