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”和（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

编辑：假设你无法获得元素，我似乎错了。正如其他人在此发布的那样，您可以通过以下方式获取：

$('#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并获取元素的属性“value”，无论是否进行了检查。

如何从JQuery选择器获取DOM元素

4 个答案: