如何從 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.

拜托，我不想這樣做：

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

這讓我繞過了復選框，但其他時候我需要真正的DOMElement 。

Answer 1

您可以通過以下方式訪問原始 DOM 元素：

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

或更簡單地說：

$("table")[0];

然而（根據我的經驗）實際上並沒有很多你需要這個。 以您的復選框為例：

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

更“jquery'ish”和（恕我直言）更簡潔。 如果你想給它們編號怎么辦？

$(":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

編輯：似乎我假設您無法獲取元素是錯誤的。 正如其他人在此處發布的那樣，您可以通過以下方式獲取：

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

我已經驗證這實際上返回了匹配的 DOM 元素。

Answer 3

我需要將元素作為字符串獲取。

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

這會給你類似的東西：

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

...作為字符串而不是 DOM 元素。

Answer 4

如果您需要直接與 DOM 元素交互，為什么不直接使用document.getElementById因為，如果您嘗試與特定元素交互，您可能會知道 id，假設類名僅在一個元素或其他元素上選擇往往是有風險的。

但是，我傾向於同意其他人的看法，即在大多數情況下，您應該學習使用 jQuery 提供的功能來做您需要的事情，因為它非常靈活。

更新：基於評論：這是一篇有很好解釋的帖子： http : //www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

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

如果選中，這將返回值，否則返回 0。

$(this).val()只是進入 dom 並獲取元素的屬性“值”，無論它是否被檢查。