2013.03.16
Simple Tweetが動かないんだども
すみません実験しました。
というかちゃんと動いてます。お騒がせしました。
Twitter API 1.1に対応しているので、3月5日のTwitterAPI 1.0 終了祭りには関係ないと思われるのですが。
さっきの投稿反映されなかったなー Error! って表示だけでた。
2013.03.16
すみません実験しました。
というかちゃんと動いてます。お騒がせしました。
Twitter API 1.1に対応しているので、3月5日のTwitterAPI 1.0 終了祭りには関係ないと思われるのですが。
さっきの投稿反映されなかったなー Error! って表示だけでた。
2013.03.16
前回と同じ.filter(function(){})で要素を選択しようというネタなんですが、調子に乗って今度はidをふるい分けてみました。
なんでidをふるい分けるんじゃ!id最強だろう!!なのですが…。
今回はWordpressのプラグインWP SyntaxHighlighter の吐き出す idを練習を兼ねてごにょごにょしてみたいと思います。
1 2 3 4 5 |
<p>ほにゃらら〜</p> <div> <div id="highlighter_364948" class="syntaxhighlighter notranslate css">syntaxのテーブル</div> </div> <p class="syn_next">ひよこをもっちりとさせるスクリプトです</p> |
Wordpressが書き出してくれるhtmlはこんな構成になっております。
’p’のmarginを広くとっているためsyntaxhighlighterが文章から浮いた感じになってしまっておりました。
syntaxhighlighterの前後にある’p’のみ、marginを調整して、文章とのつながりを持たせたい。
よく見るとsyntaxhighlighterは名無しdivの子要素のdivに個別のidを割り振ってます。
id="highlighter _364948"
こっからなんとかたどれそうだけど、一つずつに’highlighter_連番’が振られた膨大な数のidをセレクタにするのは無理です。
でも、’highlighter’部分は共通だよね!
そこで、さっき覚えた正規表現とやらを試してみることに。
1 |
/^highlighter/ |
^ という記号で先頭からの位置指定ができるようです。
「もしかしてセレクタに使えるんじゃ!」と思いつきましたが、セレクターに正規表現は使えないようです。
やっぱり、覚えたての.filter(function(){})をまたしても使うことにします。
1 2 3 4 |
var $main = $('#main'); var synFTp = $main.find('div').filter(function (){ return this.id.match(/^highlighter/); }).parent('div'); |
思いっきり同じです。$mainという変数は単純にメインカラムのwrapのdivです。
メインカラムからfindしたdivのうち、idの先頭の文字列がhighlighterのdivをfilterしています。ルー大柴みたい。
しかし、最終的に操作したいのは’p’なので、いったんhighlighterの親要素の名無しdivにさかのぼり、変数にぶっこみました。
ここまで前回と全く同じです。
変数 synFTpでは最終的にsyntaxhighlighterをラップしている名無しdivを選択しています。前後のpはこのdivの兄弟要素ということになります。
そこでjQueryの強力なAPIを使います。Traversingというらしい。findもfilterもそうなんだけど、横断するという意味らしい。
おなじみヌーさんの所から引用させていただきますと
要素集合の各要素の「前」にあたる兄弟要素を、全て抽出する。
このprev関数はあくまで各要素のすぐ隣の要素のみを抽出し、前以前を全て選択するわけではない。その場合はprevAll()を用いること。
引数には条件式を指定し、結果セットから更に絞込みを行うことも可能。
要素集合の各要素の「次」にあたる兄弟要素を、全て抽出する。
このnext関数はあくまで各要素のすぐ隣の要素のみを抽出し、次以降を選択するのではない。その場合はnextAllを用いること。
引数には条件式を指定し、結果セットから更に絞込みを行うことも可能。
このprevとnextを使い前後の兄弟要素’p’へクラスを加えcssでmarginを設定しました。
1 2 3 4 5 6 7 |
$(function(){ var $main = $('#main'); var synFTp = $main.find('div').filter(function (){ return this.id.match(/^highlighter/); }).parent('div'); synFTp.prev('p').addClass('syn_prev').end() .next('p').addClass('syn_next'); |
動かないんです。WP SyntaxHighlighterはfooterにscriptを書き出しているので、別の外部ファイルにしてwp_enqueue_scriptでfooterに書き出してやればいいかなと思ってました。
実際、WP SyntaxHighlighterのscriptの後に書き出されるのですが、動きません。うっ。
間に合わせの手段ですが、
1 2 3 |
$(function(){ $(window).on('load',function(){・・・・・・}); }); |
function(){・・・・・・}の中に書いてやるとページが読み込まれてから中に書いたscriptが実行されます。
だがしかし…これを足したせいか、せっかく速くなったキノコ表示が遅くなったような気がします…