如何从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"和(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.

Answer 2

编辑:似乎我错了,假设你无法获得元素.正如其他人在这里发布的那样,你可以得到它:

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

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

Answer 3

我需要将元素作为字符串.

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

哪个会给你这样的东西:

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

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