前回と同じ.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とnextを使い前後の兄弟要素’p’へクラスを加えcssでmarginを設定しました。

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

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

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