二回続けてのブラケット記法エントリー。今回は普通、ドット記法で書くjQueryをブラケット記法で書いてみることに。
例えば、以下の様なHTMLがあるとします。
<select id="bracket-test">
<option value="1">いち</option>
<option value="2" selected>に</option>
<option value="3">さん</option>
</select>
この時、idが”bracket-html”の中の要素のうち2つ目のoptionタグの要素内のHTMLを取得してconsole.logで出力する場合、ドット記法だと下記のように書くことがデキます。
console.log($('#bracket-test').find('option').eq(1).html()); //=> "に"
いやいや、そこは『$(‘#bracket-test option:eq(1)’).html()』でいいだろ！ と突っ込まれそうですが、とにかく上記のコードをブラケット記法で記述すると下記のようになります。
console.log($('#bracket-test')['find']('option')['eq'](1)['html']()); //=> "に"
長ったらしいですし、括弧やシングルクォーテーションばっかりでわかりにくいです。普通はこんな書き方しないでしょうし、オススメもしません。ただ、ブラケット記法だとメソッド名に文字列の変数が利用できるので例えば、下記のようなことができます。
// ブラケット記法で値を取得
function getBracketJQuery(selector, method){
return $(selector)[method]();
}
console.log(getBracketJQuery('#bracket-test', 'val')); //=> "2"
console.log(getBracketJQuery('#bracket-test', 'text')); /*=>"
いち
に
さん"*/
console.log(getBracketJQuery('#bracket-test', 'html')); /*=>'
<option value="1">いち</option>
<option value="2" selected="">に</option>
<option value="3">さん</option>'*/
めったにこんな処理が必要なことがないとは思いますが、ブラケット記法だとこんなこともできるというサンプルです。
さて、ここで、いっそのこと『$』もブラケットに入れたい！ と思う人がいるかもしれません。そもそもJavaScriptで作成したグローバル変数やグローバル関数はwindowオブジェクトに属しています。JavaScriptでは大抵windowを省略しますが、jQueryもwindowオブジェクトのメンバになっています。すなわち、『$===window.$』の結果はtrueです。というわけで、先ほどのブラケット記法での記述は下記のように書くこともデキます。
console.log(window['$']('#bracket-test')['find']('option')['eq'](1)['html']()); //=> "に"
何々？ どうせなら、『window』もブラケットに入れたい？ そういう趣味をお持ちの人もいるかもしれません。windowオブジェクトにはtopというプロパティを持っており、これはウィンドウ階層における最上位のウィンドウへの参照を返します(参考：window.top – Web API インターフェイス | MDN)。よく分からない説明かもしれませんが、開いているページの参照を返すということです。すなわち、先ほどの記述は下記のように書くこともできます。
console.log(top['window']['$']('#bracket-test')['find']('option')['eq'](1)['html']()); //=> "に"
『top』もブラケットに入れたい場合は下記のような感じ。
console.log(window['top']['window']['$']('#bracket-test')['find']('option')['eq'](1)['html']()); //=> "に"
『window』もブラケットｎ(ry。以下、無限ループ。
コメント