Question

Below is the code where I obtain my input element with jQuery:

var txt = $(tableRow).find('input:text');
if (txt.value == null) {
  //TO DO code
}

and here’s how I do it with pure JavaScript

var txt = document.getElementById('txtAge');
if (txt.value == null) {
  //TO DO code
}

With the first way the value of the txt is undefined. But with the second way the value is what’s inside the input element. Now more interesting is, on the bottom-right pane of the Mozilla Firebug if I scroll down to the “value” of the txt I can see it there, both ways.

I know I can simply say $(txt).val(), but I also want to understand why I can’t access the value of an element if it’s been selected by jQuery. Isn’t jQuery just a library of JavaScript functions?

Answer 1

.find() will return an arry-like object. If you’re sure that there’s one, and one only, element matching your query, you could do

var txt = $(tableRow).find('input:text')[0].value;

That’s not very jQuery-like, so to speak, more like a mismatch of both jQuery and DOM methods, but it’ll get what you want. Also, since you show, as a DOM example, var txt = document.getElementById('txtAge');, this could be rewritten in jQuery as

var txt = $('#txtAge')[0];