私の元のHTMLは次のようになります。
<h1>Page Title</h1>
<h2>Title of segment one</h2>
<img src="img.jpg" alt="An image of segment one" />
<p>Paragraph one of segment one</p>
<h2>Title of segment two</h2>
<p>Here is a list of blabla of segment two</p>
<ul>
<li>List item of segment two</li>
<li>Second list item of segment two</li>
</ul>
ここで、(jQueryではなく)PHPを使用して、次のように変更します。
<h1>Page Title</h1>
<div class="pane">
<h2>Title of segment one</h2>
<img src="img.jpg" alt="An image of segment one" />
<p>Paragraph one of segment one</p>
</div>
<div class="pane">
<h2>Title of segment two</h2>
<p>Here is a list of blabla of segment two</p>
<ul>
<li>List item of segment two</li>
<li>Second list item of segment two</li>
</ul>
</div>
<h2></h2>
したがって、基本的には、タグのセット間ですべてのHTMLをラップする必要があり<div class="pane" />
ます。上記のHTMLを使用すると、jQueryを使用してアコーディオンを作成できます。これは問題ありませんが、もう少し詳しく説明します。
<h2></h2>
影響を受けたすべてのセットのulを次のように作成したいと思います。
<ul class="tabs">
<li><a href="#">Title of segment one</a></li>
<li><a href="#">Title of segment two</a></li>
</ul>
このシステムのJavaScript部分を実装するためにjQueryツールタブを使用していることに注意してください。.tabsのhrefが特定のh2対応物を指している必要はありません。
私の最初の推測は正規表現を使用することですが、DOMドキュメントについて話している人もいます。
jQueryのこの問題には2つの解決策がありますが、PHPに相当するものが本当に必要です。
- https://stackoverflow.com/questions/7968303/wrapping-a-series-of-elements-between-two-h2-tags-with-jquery
- 見出しタグに基づいてネストされた目次を自動的に生成します
誰かが実際に私を助けてくれませんか?