如何从 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。

198238 次浏览
小开
最佳答案

您可以使用以下方法访问原始 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个备用情况。

小开

如果您需要直接与 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 并获取元素的属性“ value”，不管它是否被检查。

小开

编辑: 看来我错误地认为你不能得到元素。正如其他人在这里发布的，你可以通过以下方式获得:

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

我已经验证了这实际上返回了匹配的 DOM 元素。

小开

我需要得到一个字符串形式的元素。

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

它会给你类似这样的东西:

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

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


提交答案