奇妙なマークアップで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 が各 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));
});