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

I'm having an impossibly hard time finding out to get the actual DOMElement from a jquery selector. Sample Code:

我将很难找到从jquery选择器中获取实际DOMElement的时间。示例代码:

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

and in another piece of code I'm trying to determine the checked value of the checkbox.

在另一段代码中，我试图确定复选框的选中值。

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

And please, I do not want to do:

请，我不想做:

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

That get's me around the checkbox, but other times I've needed the real DOMElement.

那是我在复选框的周围，但是其他时候我需要真正的DOMElement。

4 个解决方案

#1

233

You can access the raw DOM element with:

您可以使用以下方法访问原始DOM元素:

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

or more simply:

或者更简单:

$("table")[0];

There isn't actually a lot you need this for however (in my experience). Take your checkbox example:

实际上，你需要的东西并不多(在我的经验中)。把你的复选框的例子:

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

is more "jquery'ish" and (imho) more concise. What if you wanted to number them?

更“jquery”和(imho)更简洁。如果你想给他们编号呢?

$(":checkbox").each(function(i, elem) {
  $(elem).data("index", i);
});
$(":checkbox").click(function() {
  if ($(this).is(":checked") && $(this).data("index") == 0) {
    // do stuff
  }
});

Some of these features also help mask differences in browsers too. Some attributes can be different. The classic example is AJAX calls. To do this properly in raw Javascript has about 7 fallback cases for XmlHttpRequest.

其中一些特性也有助于屏蔽浏览器中的差异。有些属性可能是不同的。典型的例子是AJAX调用。要正确地在原始Javascript中实现这一点，XmlHttpRequest有7个回退案例。

#2

Edit: seems I was wrong in assuming you could not get the element. As others have posted here, you can get it with:

编辑:似乎我错在假设你不能得到元素。正如其他人在这里发布的，你可以得到:

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

I have verified this actually returns the DOM element that was matched.

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

#3

I needed to get the element as a string.

我需要把元素作为字符串。

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

Which will give you something like:

它会给你一些类似的东西:

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

...as a string rather than a DOM element.

…作为一个字符串而不是DOM元素。

#4

If you need to interact directly with the DOM element, why not just use document.getElementById since, if you are trying to interact with a specific element you will probably know the id, as assuming that the classname is on only one element or some other option tends to be risky.

如果需要直接与DOM元素交互，为什么不直接使用文档。getElementById，如果您试图与一个特定的元素交互，您可能会知道id，就像假设类名仅在一个元素上，或者其他一些选项往往是有风险的。

But, I tend to agree with the others, that in most cases you should learn to do what you need using what jQuery gives you, as it is very flexible.

但是，我倾向于同意其他人的观点，在大多数情况下，您应该学习使用jQuery提供的内容，因为它非常灵活。

UPDATE: Based on a comment: Here is a post with a nice explanation: http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

更新:基于评论:这里有一个很好的解释:http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html。

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

This will return the value if it's checked, or 0 if it's not.

如果它被选中，它将返回值，如果不是，则返回0。

$(this).val() is just reaching into the dom and getting the attribute "value" of the element, whether or not it's checked.

$(this).val()只是到达dom并获得元素的属性“值”，不管它是否被选中。

#1

233