h5のリストがあります:
<div id="accordion"><h5>One</h5>
<p>Lorem ipsum dolor sit amet</p>
<h5>Two</h5>
<p>Lorem ipsum dolor sit amet.</p>
<h5>Three</h5>
<p>Lorem ipsum dolor sit amet</p>
<h5>Four</h5>
<p>Lorem ipsum dolor sit amet</p>
<h5>Five</h5>
<p>Lorem ipsum dolor sit amet</p></div>
そして、最初の要素を含むjQuery UIアコーディオンを使用してそれらをアコーディオンに変えたいので、各h5の間にコンテンツをラップしたいと思います。.after() と .before() を使用すると、の終了タグと開始タグの両方が</h5>
取得され、最初の要素を取得してその上に終了タグを挿入しないようにする方法もわかりません。
これまでのところ、明らかに機能していないもの:
var insert = true;
$("#accordion h5").each(function(event) {
// All of them have a div immediatly after it.
$(this).after("<div>");
if (insert === true) {
insert = false;
} else {
$(this).before("</div>");
}
});
明確にするために、私の出力はこのようになりたいのですが、コンテンツが何でもかまいませんので、常に p タグがあるとは限りません。
<div id="accordion">
<h5>One</h5>
<div><p>Lorem ipsum dolor sit amet</p></div>
<h5>Two</h5>
<div><p>Lorem ipsum dolor sit amet.</p></div>
<h5>Three</h5>
<div><p>Lorem ipsum dolor sit amet</p></div>
...
</div>