باستخدام الأكورديون مسج مع العلامات غريبة

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>

وأساسا باستخدام h3s كما رؤوس الأكورديون، وبقية المحتوى في كل div.section كمحتوى لكل لوحة الأكورديون. (لاحظ أيضا: العناوين يمكن أن يكون أي شيء بين H2 و H6، اعتمادا على التعشيش الخاصة بهم).

وأنا أحسب أن هذا سيكون أسهل إذا تم إعادة هيكلة شجرة DOM فكانت h3s خارج كل 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));
});