Mit jQuery Akkordeon mit seltsamem Markup

Question

Ich habe diese Struktur HTML und will es ein Akkordeon konvertieren.

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

Grundsätzlich Verwendung der h3s als Akkordeon-Header und den Rest des Inhalts in jedem div.section als Inhalt für jede Akkordeon-Panel. (Beachten Sie auch: die Überschriften könnte alles zwischen h2 und h6 sein, auf deren Verschachtelung abhängig).

dachte ich, dass dies am einfachsten wäre, wenn der DOM-Baum neu strukturiert wurde, so dass die h3s außerhalb jeden div waren denn das ist, wie die Akkordeonstandardmäßig funktioniert:

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

Das einzige Problem ist: wie die Überschriften zu bewegen? (Ich keinen Zugriff auf den HTML-Code zu ändern).

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, fand ich die Lösung.

Mit $.each()

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

Gibt es eine bessere Lösung als diese, wenn? Vielleicht nur die Vanille-Akkordeon-Optionen?

Answer 2

Wie wäre es damit:

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