2013.03.16

jQuery 調子に乗って正規表現でfilter(function(){~しまくってみる

前回と同じ.filter(function(){})で要素を選択しようというネタなんですが、調子に乗って今度はidをふるい分けてみました。
なんでidをふるい分けるんじゃ!id最強だろう!!なのですが…。
今回はWordpressのプラグインWP SyntaxHighlighter の吐き出す idを練習を兼ねてごにょごにょしてみたいと思います。

Wordpressが書き出してくれるhtmlはこんな構成になっております。
’p’のmarginを広くとっているためsyntaxhighlighterが文章から浮いた感じになってしまっておりました。
syntaxhighlighterの前後にある’p’のみ、marginを調整して、文章とのつながりを持たせたい。

よく見るとsyntaxhighlighterは名無しdivの子要素のdivに個別のidを割り振ってます。

id="highlighter _364948"

こっからなんとかたどれそうだけど、一つずつに’highlighter_連番’が振られた膨大な数のidをセレクタにするのは無理です。
でも、’highlighter’部分は共通だよね!
そこで、さっき覚えた正規表現とやらを試してみることに。

^ という記号で先頭からの位置指定ができるようです。
「もしかしてセレクタに使えるんじゃ!」と思いつきましたが、セレクターに正規表現は使えないようです。
やっぱり、覚えたての.filter(function(){})をまたしても使うことにします。

思いっきり同じです。$mainという変数は単純にメインカラムのwrapのdivです。
メインカラムからfindしたdivのうち、idの先頭の文字列がhighlighterのdivをfilterしています。ルー大柴みたい。

しかし、最終的に操作したいのは’p’なので、いったんhighlighterの親要素の名無しdivにさかのぼり、変数にぶっこみました。
ここまで前回と全く同じです。

変数 synFTpでは最終的にsyntaxhighlighterをラップしている名無しdivを選択しています。前後のpはこのdivの兄弟要素ということになります。
そこでjQueryの強力なAPIを使います。Traversingというらしい。findもfilterもそうなんだけど、横断するという意味らしい。
おなじみヌーさんの所から引用させていただきますと

prev([expr]) – jQuery 日本語リファレンス

要素集合の各要素の「前」にあたる兄弟要素を、全て抽出する。

このprev関数はあくまで各要素のすぐ隣の要素のみを抽出し、前以前を全て選択するわけではない。その場合はprevAll()を用いること。
引数には条件式を指定し、結果セットから更に絞込みを行うことも可能。

next([expr]) – jQuery 日本語リファレンス

要素集合の各要素の「次」にあたる兄弟要素を、全て抽出する。

このnext関数はあくまで各要素のすぐ隣の要素のみを抽出し、次以降を選択するのではない。その場合はnextAllを用いること。
引数には条件式を指定し、結果セットから更に絞込みを行うことも可能。

このprevとnextを使い前後の兄弟要素’p’へクラスを加えcssでmarginを設定しました。

だがしかし…動かないよー

動かないんです。WP SyntaxHighlighterはfooterにscriptを書き出しているので、別の外部ファイルにしてwp_enqueue_scriptでfooterに書き出してやればいいかなと思ってました。
実際、WP SyntaxHighlighterのscriptの後に書き出されるのですが、動きません。うっ。
間に合わせの手段ですが、

function(){・・・・・・}の中に書いてやるとページが読み込まれてから中に書いたscriptが実行されます。
だがしかし…これを足したせいか、せっかく速くなったキノコ表示が遅くなったような気がします…

コメントをどうぞ



PageTop