jQueryオブジェクトから、素のDOMオブジェクトを取得する方法
jQuery(要素s)は、たとえ要素が一つの場合でも、配列として持っている。
jQuery().get(index)で、もとのDOMオブジェクトが取得できる。
jQuery('li').get(0)なら、要素
jQuery().get()にはショートカットがあり、通常はそちらを使用することになる。
ショートカットは、jQuery(要素)[index]である。
これの使いどころは、色々考えられるが、要素セットの比較などに使えるのではなかろうか。
jQuery(要素)は、同じ種類の要素をパラメータにとっても、jQueryが呼ばれば時点で、新しいjQueryオブジェクトが作成されるので
==演算子で比較してもfalseが返ってきてしまう。
そこで、DOMオブジェクトに変換したあとで、==演算子で比較すると、同じ種類の要素の場合、trueを返してくれることになる。
以下はその例である。
//テーブルの項目をクリックしたときのイベント
var textbox;
$('td').click(
function(event){ //textboxのjQueryオブジェクトが存在し、且つ「textboxのDOMオブジェクト」と「イベントが
//発生したDOMオブジェクト」が異なれば、テキストボックスを普通のセルに戻す。
//この設定は、テキストボックス内のカーソルの移動を、マウスクリックを使って
//可能にする為である。
if(textbox && textbox[0] != $(event.target)[0]) textbox.replaceWith(textbox.val());
$(event.target).html('');
textbox = $('#edit_item');
textbox.focus();
textbox.css({width:$(event.target).width() + 'px'});