Как получить элемент DOM из селектора JQuery

Мне трудно понять, как получить фактический DOMElement из селектора jquery. Пример кода:

<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.

Ответ 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.

Ответ 2

Изменить: кажется, я ошибался, предполагая, что вы не можете получить элемент. Как и другие, размещенные здесь, вы можете получить его с помощью:

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

Я проверил, что это фактически возвращает элемент DOM, который был сопоставлен.

Ответ 3

Мне нужно было получить элемент как строку.

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

Что даст вам что-то вроде:

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

... как строка, а не элемент DOM.

Ответ 4

Если вам нужно напрямую взаимодействовать с элементом DOM, почему бы просто не использовать document.getElementById, поскольку, если вы пытаетесь взаимодействовать с определенным элементом, вы, вероятно, знаете идентификатор, поскольку предполагается, что имя класса находится только на одном элементе или какой-либо другой вариант имеет тенденцию быть рискованным.

Но я склонен соглашаться с остальными, что в большинстве случаев вам следует научиться делать то, что вам нужно, используя то, что дает jQuery, так как оно очень гибкое.

ОБНОВЛЕНИЕ: На основе комментария: Вот сообщение с хорошим объяснением: http://www.mail-archive.com/[email protected]/msg04461.html

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

Это вернет значение, если оно отмечено, или 0, если оно не указано.

$(this).val() просто входит в dom и получает атрибут "значение" элемента, независимо от того, проверен он или нет.