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

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

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

別のコードでは、チェックボックスのチェックされた値を特定しようとしています。

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

そして、私はしたくない：

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

これでチェックボックスの周りが回りますが、本当のDOMElementが必要な場合もあります。

生の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でこれを適切に行うには、の約7つの代替ケースがありXmlHttpRequestます。

編集：あなたが要素を取得できなかったと仮定すると、私は間違っていたようです。他の人がここに投稿したので、あなたはそれを得ることができます：

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

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

要素を文字列として取得する必要がありました。

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

これはあなたに次のようなものを与えます：

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

... DOM要素ではなく文字列として。

DOM要素と直接やり取りする必要がある場合は、単に使用しないでdocument.getElementByIdください。特定の要素とやり取りしようとしている場合は、おそらくクラス名が1つの要素のみにあると想定するか、他のオプションがあると仮定すると、IDがわかります。危険を冒す。

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

更新：コメントに基づく：これは良い説明のある投稿です：http : //www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

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

チェックされている場合は値を返し、チェックされていない場合は0を返します。

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