概要 ▶ なんでもjQueryでできるのではないかと思って考えてみた。考えのネタ元は以下のページ。[う][WordPress]カテゴリリストの親カテゴリだけにclass属性を付ける（子カテゴリには付けない）方法こちらのページはWordPressのタグで「親カテゴリのみにclass属性を付ける」ことをやっているわけですが、私はWordPressは全然わからないので、jQueryで何とかする方法を考えてみます。
なんでもjQueryでできるのではないかと思って考えてみた。
考えのネタ元は以下のページ。
こちらのページはWordPressのタグで「親カテゴリのみにclass属性を付ける」ことをやっているわけですが、私はWordPressは全然わからないので、jQueryで何とかする方法を考えてみます。
CMSから書き出されていた元のタグはこんな感じなんでしょうかね。
<ul class="accMenu"> <li><a href="/hoge1/">hoge1</a><ul> <li><a href="/hoge1/hoge1-1/">hoge1-1</a></li> <li><a href="/hoge1/hoge1-2/">hoge1-2</a></li> </ul></li> <li><a href="/hoge2/">hoge2</a></li> </ul>
これをjQueryで何とかして以下の様にします。
<ul class="accMenu"> <li class="open"><a href="/hoge1/">hoge1</a><ul> <li><a href="/hoge1/hoge1-1/">hoge1-1</a></li> <li><a href="/hoge1/hoge1-2/">hoge1-2</a></li> </ul></li> <li><a href="/hoge2/">hoge2</a></li> </ul>
早速考えてみましょう。
要素をよく見てみる
jQueryで大切なことはselectorで選べるかどうかです。selectorはいわゆる絞り込み検索みたいなものなので、規則性を発見することが大切です。
先ほどのコードをよく見てみましょう。
<ul class="accMenu"> <li><a href="/hoge1/">hoge1</a><ul> <li><a href="/hoge1/hoge1-1/">hoge1-1</a></li> <li><a href="/hoge1/hoge1-2/">hoge1-2</a></li> </ul></li> <li><a href="/hoge2/">hoge2</a></li> </ul>
子カテゴリーのある場合はli要素の中にさらにul要素があってli要素で子カテゴリーを表示しているようです。
子カテゴリーがない場合はli要素だけのようです。
つまり、li要素の中にulがある場合にclassを付けてあげれば良いようです。
このため、jQueryのスクリプトは以下の通りとなります。
<script type="text/javascript">
jQuery(".accMenu li:has(ul)").addClass("open");
</script>「.accMenu li:has(ul)」はaccMenuというclass名を持つ要素の中のliの中にulを持っているliを選択します。そこにaddClassでopenを付けます。
これだけです。
ネタ元の記事ではアコーディオンメニューにしたいということでしたので、このスクリプトを先に実行して、アコーディオンメニューのスクリプトを実行すれば動くはずです。
孫カテゴリーがある場合でも動くのか？
WordPressに孫カテゴリーがあるのかは定かではないですが、ある場合は以下の様なHTMLになると思います。<ul class="accMenu"> <li><a href="/hoge1/">hoge1</a><ul> <li><a href="/hoge1/hoge1-1/">hoge1-1</a></li> <li><a href="/hoge1/hoge1-2/">hoge1-2</a></li> </ul></li> <li><a href="/hoge2/">hoge2</a></li> <li><a href="/hoge3/">hoge3</a><ul> <li><a href="/hoge3/hoge3-1/">hoge3-1</a><ul> <li><a href="/hoge3-1-1/">hoge3-1-1</a></li> </ul></li> </ul></li> </ul>
ここでは以下の様になればOKなのではないでしょうか。
- <li><a href="/hoge3/">hoge3</a><ul>
→ <li class="open"><a href="/hoge3/">hoge3</a><ul> - <li><a href="/hoge3/hoge3-1/">hoge3-1</a><ul>
→ <li class="open"><a href="/hoge3/hoge3-1/">hoge3-1</a><ul>
孫カテゴリーでも「.accMenu li:has(ul)」の条件に当てはまるので動作します。
実際に先ほどのjQueryのスクリプトを動作させてみたら、上記のようになりました。
意図した動作になっているようです。
jQueryでclassを後付けする問題点
今回はjQueryでclassを付けてみましたが、jQueryは要素ができた後に実行しなくては基本的に意味がありません（※）。要素ができあがって後付けで色々処理を行うわけです。
このため、CMS ―― 今回はWordPress ―― からHTMLが書き出されて、表示された一瞬はclassが付いていないため意図しない表示になることも考えられます。
（まぁ最初はcssでdisplay:none;にしておいて、処理が終わったらdisplay:blockする、またはjQueryのslideDownなどで表示しても良いでしょうけど…）
確かにjQueryでは簡単に要素が操作できて便利ですが、表示の問題の可能性としてあることを理解して使っていきましょう。
それでは。
※liveは除く