JQueryセレクタからDOM要素を取得する方法

Question

jqueryセレクタから実際のDOMElementを取得することは非常に困難です。サンプルコード：

<input type="checkbox" id="bob" /> 
    var checkbox = $("#bob").click(function() { //some code }) 

他のコードでは、チェックボックスのチェック値を決定しようとしています。

if (checkbox.eq(0).SomeMethodToGetARealDomElement().checked) 
    //do something. 

そして、私はしたくないしてください。取得チェックボックスの周りに私ですが、他の回は、私は本当のDOMElementのを必要としました

if (checkbox.eq(0).is(":checked")) 
    //do something 

。

Answer 1

あなたはして生のDOM要素にアクセスすることができます。

$("table").get(0); 

以上単に：

$("table")[0]; 

あなたが（私の経験では）しかし、これを必要とする多くは、実際にはありません。あなたのチェックボックスの例を取っ​​てください：

$(":checkbox").click(function() { 
    if ($(this).is(":checked")) { 
    // do stuff 
    } 
}); 

"jquery'ish"と（imho）より簡潔です。番号を付けたい場合はどうすればいいですか？

$(":checkbox").each(function(i, elem) { 
    $(elem).data("index", i); 
}); 
$(":checkbox").click(function() { 
    if ($(this).is(":checked") && $(this).data("index") == 0) { 
    // do stuff 
    } 
}); 

これらの機能の一部は、ブラウザのマスクの違いにも役立ちます。属性によっては異なるものがあります。古典的な例はAJAX呼び出しです。生のJavascriptでこれを適切に行うには、XmlHttpRequestに約7つのフォールバックケースがあります。

Answer 2

DOM要素と直接対話する必要がある場合は、特定の要素とやり取りしようとしている場合は、クラス名が1つの要素のみにあると仮定してidを知ることになるため、document.getElementByIdを使用しないでください。いくつかの他の選択肢は危険な傾向があります。

しかし、私はほとんどの場合、jQueryが提供するものを使用して必要なものを実行することを学ぶべきであることに同意する傾向があります。

UPDATE：コメントに基づいて： ここでは、素敵な説明とポストです：http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

$(this).attr("checked") ? $(this).val() : 0 

そうでない場合、これは、それがチェックだ場合は値を返す、または0になります。

$(this).val()は、domに到達し、チェックされているかどうかにかかわらず、要素の属性「値」を取得しています。

Answer 3

編集：あなたが要素を取得できなかったと仮定して私が間違っていたようです。

$('#element').get(0); 

私はこれが実際に一致したDOM要素を返すことを確認しました。

Answer 4

要素を文字列として取得する必要がありました。文字列ではなく、DOM要素として

<input type="text" id="bob" value="hello world" /> 

...：あなたのような何かを与える

jQuery("#bob").get(0).outerHTML; 

。