[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
It seems more intuitive and consistent than:
$('#foo')[0].className;
$('#foo')[0].size;
$('#foo')[0].type;
If you're repeatedly accessing the first DOM object of a jQuery
selector array, it's a good practice to set a variable:
var myObject = $('#foo')[0];
..then you can access DOM properties like you're used to doing, also
save the browser from the duplicate object lookups:
myObject.className
myObject.size
myObject.type
-Wick
CarComplaints.com
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
On Aug 15, 11:29 am, pd [EMAIL PROTECTED] wrote:
I've been hacking with jQuery on and off lately and I've now hit the
annoying problem of not being able to access simple DOM 0 properties
unless, apparently, using either of the following syntaxes:
$('#foo')[0]
Will throw error if there is no match, IIRC.
$('#foo').get(0)
snip
Use $('#foo:nth(0)') instead. For just first match, you could use $
('#foo:first')
--
?php echo 'Just another PHP saint'; ?
Email: rrjanbiah-at-Y!comBlog: http://rajeshanbiah.blogspot.com/
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
The point is to get the first DOM node, so you'd still need to do [0], which
would still throw an error if there was no match. If you're not certain that
there'll be a match, maybe something like this would be safer:
var $foo = $('#foo');
if($foo.length 0) {
var foo = $foo[0];
} else {
// no foo
}
I use $ to prefix variables that point to a jQuery object as a convention to
remind myself that it's a jQuery object.
--Erik
On 8/16/07, R. Rajesh Jeba Anbiah [EMAIL PROTECTED] wrote:
On Aug 15, 11:29 am, pd [EMAIL PROTECTED] wrote:
I've been hacking with jQuery on and off lately and I've now hit the
annoying problem of not being able to access simple DOM 0 properties
unless, apparently, using either of the following syntaxes:
$('#foo')[0]
Will throw error if there is no match, IIRC.
$('#foo').get(0)
snip
Use $('#foo:nth(0)') instead. For just first match, you could use $
('#foo:first')
--
?php echo 'Just another PHP saint'; ?
Email: rrjanbiah-at-Y!comBlog: http://rajeshanbiah.blogspot.com/
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
I've been hacking with jQuery on and off lately and I've
now hit the annoying problem of not being able to access
simple DOM 0 properties unless, apparently, using either
of the following syntaxes:
$('#foo')[0]
Will throw error if there is no match, IIRC.
No, it won't. It is not an error to fetch a nonexistent array element. It
returns undefined.
You could even do $('#foo')[12345] and it wouldn't throw an error.
Of course, if there is no element with id 'foo', this will throw an error:
$('#foo')[0].whatever
Because $('#foo')[0] returned undefined, so you are trying to access the
'whatever' property of... undefined.
It's just as if you had done:
var array = [];
var element = array[0]; // not an error
var element1 = array[1]; // also not an error
// element and element1 have a value of undefined, so...
alert( element ); // alerts undefined
alert( element.test ); // throws an error
But you can do this:
var element = $('#foo')[0];
if( element ) {
// now you know that element exists
// and can access its properties
}
Use $('#foo:nth(0)') instead. For just first match, you could use $
('#foo:first')
That will still return an array (if it works), leaving you in the same boat
as before.
-Mike
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
On Aug 16, 8:55 pm, Michael Geary [EMAIL PROTECTED] wrote:
I've been hacking with jQuery on and off lately and I've
now hit the annoying problem of not being able to access
simple DOM 0 properties unless, apparently, using either
of the following syntaxes:
$('#foo')[0]
Will throw error if there is no match, IIRC.
No, it won't. It is not an error to fetch a nonexistent array element. It
returns undefined.
You could even do $('#foo')[12345] and it wouldn't throw an error.
Of course, if there is no element with id 'foo', this will throw an error:
$('#foo')[0].whatever
Because $('#foo')[0] returned undefined, so you are trying to access the
'whatever' property of... undefined.
snip
Thanks for a nice explanation. I'm sorry for jumping without reading
it properly.
--
?php echo 'Just another PHP saint'; ?
Email: rrjanbiah-at-Y!comBlog: http://rajeshanbiah.blogspot.com/
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
$('#foo')[0]
Will throw error if there is no match, IIRC.
No, it won't. It is not an error to fetch a nonexistent
array element
Thanks for a nice explanation. I'm sorry for jumping
without reading it properly.
Glad to help - but no apology needed! You should see some of the bloopers
I've posted myself... :-)
-Mike
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
var a = $(...);
var b = a.length;
a.XXX();
var c = a.get(0);
Now, 'a' is a jQuery object that contains all of the elements that matched
the selector. 'b' is the number of elements found. The third line is calling
a jQuery function or plugin on the jQuery object that is wrapping the
selected elements. 'c' is the DOM node for the first selected element. To
call a jQuery function or plugin, use 'a', to access DOM properties of the
first element, use 'c'. To access DOM properties of all of the elements that
are wrapped by the jQuery object, use each().
The [n] syntax is just a shortcut for .get(n):
http://docs.jquery.com/Core#get.28_num_.29
Does that help any?
--Erik
On 8/14/07, pd [EMAIL PROTECTED] wrote:
Hi All
I've been hacking with jQuery on and off lately and I've now hit the
annoying problem of not being able to access simple DOM 0 properties
unless, apparently, using either of the following syntaxes:
$('#foo')[0]
$('#foo').get(0)
Eventually after scratching my head each time, I've found this syntax
answer again. However is this documented? I really find the jQuery
documentation very handy but I do not remember seeing this crucial
information within it.
It seems from searching this group, I'm not the only person who
perceives jQuery methods to provide additional functionality above
JavaScript, but to still allow access to the simple properties we are
all familiar with. If this is not the case, and it doesn't seem to be,
these and other syntax 'shortcuts' really should be documented and
very obviously at that, shouldn't they?
I can access the wiki and I'm happy to add this information though I
am not convinced I have a complete 'handle' on it.
pd
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
Just curious, how exactly do you expect to be able to access a 0
object?
Are you thinking you can go: object.0.function()?
If so, regardless of how cool jQuery is, when an array's key uses
numerics, you simpy cannot access it as an object because objects must
start with an alpha character. I dont think there are any languages
that allow you do create/access an object that starts with a number.
On Aug 15, 1:29 am, pd [EMAIL PROTECTED] wrote:
Hi All
I've been hacking with jQuery on and off lately and I've now hit the
annoying problem of not being able to access simple DOM 0 properties
unless, apparently, using either of the following syntaxes:
$('#foo')[0]
$('#foo').get(0)
Eventually after scratching my head each time, I've found this syntax
answer again. However is this documented? I really find the jQuery
documentation very handy but I do not remember seeing this crucial
information within it.
It seems from searching this group, I'm not the only person who
perceives jQuery methods to provide additional functionality above
JavaScript, but to still allow access to the simple properties we are
all familiar with. If this is not the case, and it doesn't seem to be,
these and other syntax 'shortcuts' really should be documented and
very obviously at that, shouldn't they?
I can access the wiki and I'm happy to add this information though I
am not convinced I have a complete 'handle' on it.
pd
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
gradez28 wrote:
Just curious, how exactly do you expect to be able to access a 0
object?
Are you thinking you can go: object.0.function()?
If so, regardless of how cool jQuery is, when an array's key uses
numerics, you simpy cannot access it as an object because objects must
start with an alpha character. I dont think there are any languages
that allow you do create/access an object that starts with a number.
That works pretty fine:
var o = {};
o['0property'] = 'bar';
o['1'] = 'one';
--Klaus
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
From: pd
I've been hacking with jQuery on and off lately and I've now
hit the annoying problem of not being able to access simple
DOM 0 properties unless, apparently, using either of the
following syntaxes:
$('#foo')[0]
$('#foo').get(0)
pd, just to help clarify... The $() function returns an array of DOM
elements. You access elements of an array, of course, by using [n].
I don't know if I would call this an annoying problem, it's just the way
it is.
Imagine this code:
var myArray = [
document.getElementById('foo'),
document.getElementById('goo')
];
Now you have an array of two elements, [0] and [1], and each element is a
reference to a DOM element.
If you want the first element of the array, you would use:
myArray[0]
And you could access DOM properties with:
alert( myArray[0].id ); // alerts 'foo'
Or you could do:
var firstElement = myArray[0];
alert( firstElement.id ); // alerts 'foo'
What you couldn't do:
alert( myArray.id ); // alerts undefined
After all, myArray is not a DOM element, it's an *array* of DOM elements.
A jQuery object returned by $() is no different. Whenever you see $(), think
array of DOM elements.
(Well, it is slightly different - it is not an actual JavaScript Array
object, but it does have .length and [n] properties so it works like an
array for these purposes.)
-Mike
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
From: Erik Beeson
The [n] syntax is just a shortcut for
.get(n):http://docs.jquery.com/Core#get.28_num_.29
From: Gordon
I would imagine that the [] syntax would be a bit faster than the
get() syntax, on the grounds that the former is simply
addressing an array, whereas the latter is calling a function
and getting the returned result. I'll have to try
benchmarking them in a loop when I've got some free time.
[] is definitely faster, as well as being more concise and straightforward.
No need to benchmark unless you want to know just how much faster. There's
really never any reason to use .get(n) instead of [n].
Here's the code for .get():
get: function( num ) {
return num == undefined ?
// Return a 'clean' array
jQuery.makeArray( this ) :
// Return just the object
this[num];
},
-Mike
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
Hi All,
Thanks for the responses.
Firstly, everyone is assuming I am referring to an array. Not
necessarily the case. In fact in a legit XHTML 1.0 Strict document an
id is supposed to be unique is it not? My example used the # to refer
to a unique id on the page, therefore *not* an array of objects.
Secondly my question is, in part, not so much about the worth, speed,
friendliness of this code, but whether it's clearly documented.
Perhaps I am merely experiencing the simplicity of jQuery's design and
expecting it to extend further than it can? Perhaps not.
I don't understand (and I am more than willing to suggest it might be
my lack of understanding here that is the issue) why Example A (below)
and Example B (more efficient but same example) should work, but
Example C does not.
Example A
document.getElementById('foo').selectedIndex;
document.getElementById('foo').nodeName;
document.getElementById('foo').className;
document.getElementById('foo').nodeType;
document.getElementById('foo').blahProperty;
document.getElementById('foo').exampleProperty;
Example B
var fooObject = document.getElementById('foo');
fooObject.selectedIndex;
fooObject.nodeName;
fooObject.className;
fooObject.nodeType;
fooObject.blahProperty;
fooObject.exampleProperty;
Example C
$('#foo').selectedIndex;
$('#foo').nodeName;
$('#foo').className;
$('#foo').nodeType;
$('#foo').blahProperty;
$('#foo').exampleProperty;
Please don't jump on the properties I've picked, they are just taken
from Firebug and merely illustrative.
AFAIK all three examples get an element on the page as a *single* (not
an array) object.
I think it's reasonable (though perhaps not programmatically correct)
to see $('#foo') as the equivalent of document.getElementById('foo').
If this is not true in jQuery, which it does not appear to be, all I
am saying is this distinction should be clearly documented.
In an ideal world, I think it would rock to have a syntax like this:
$('#foo').anyProperty; // for normal 'old school' DOM properties
$('#foo').jQueryMethod(); // for jQuery methods
However I'm not pretending to know the level of JS that the great Mr
John Resig knows. If the ideal world syntax is not possible or if
people don't like it, fair enough. Again my point is that there may be
a need for this topic to be documented, that's all I'm saying.
Personally I'll probably never forget again after this experience!
pd
On Aug 16, 3:43 am, Michael Geary [EMAIL PROTECTED] wrote:
From: pd
I've been hacking with jQuery on and off lately and I've now
hit the annoying problem of not being able to access simple
DOM 0 properties unless, apparently, using either of the
following syntaxes:
$('#foo')[0]
$('#foo').get(0)
pd, just to help clarify... The $() function returns an array of DOM
elements. You access elements of an array, of course, by using [n].
I don't know if I would call this an annoying problem, it's just the way
it is.
Imagine this code:
var myArray = [
document.getElementById('foo'),
document.getElementById('goo')
];
Now you have an array of two elements, [0] and [1], and each element is a
reference to a DOM element.
If you want the first element of the array, you would use:
myArray[0]
And you could access DOM properties with:
alert( myArray[0].id ); // alerts 'foo'
Or you could do:
var firstElement = myArray[0];
alert( firstElement.id ); // alerts 'foo'
What you couldn't do:
alert( myArray.id ); // alerts undefined
After all, myArray is not a DOM element, it's an *array* of DOM elements.
A jQuery object returned by $() is no different. Whenever you see $(), think
array of DOM elements.
(Well, it is slightly different - it is not an actual JavaScript Array
object, but it does have .length and [n] properties so it works like an
array for these purposes.)
-Mike
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
id is supposed to be unique is it not? My example used the # to refer
to a unique id on the page, therefore *not* an array of objects.
Wrong, it *is* still an array of objects, it's just an array of length
1. Do console.log($('#foo')) and you'll see that it is still an array,
and an array with one object in it is not the same as the object
itself.
AFAIK all three examples get an element on the page as a *single* (not
an array) object.
And that's wrong. The jQuery object is always an array. It's of length
0 for no matches, 1 for a single match, or more for multiple matches.
That's by design, so that the chaining things work consistently. This
allows you to make chained calls that won't throw an error, regardless
of whether or not the selector found anything.
I think it's reasonable (though perhaps not programmatically correct)
to see $('#foo') as the equivalent of document.getElementById('foo').
If this is not true in jQuery, which it does not appear to be, all I
Right, it's not.
am saying is this distinction should be clearly documented.
Agreed. This should probably be made clearer. I think the recently
discussed post by Simon Willison addresses this really well (under
Doing stuff with them):
http://simonwillison.net/2007/Aug/15/jquery/
--Erik
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
Thanks Eric
I'll remember to consider jQuery selector results an array from now
on.
So, do you feel like updating the wiki? Sounds like you would be the
best person to do so as your understanding appears quite deep.
I had a look at Mr Willison's article yesterday but only got half way
through before getting distracted. Bizarre that it apparently has
something related to this topic? I will have to read the whole thing,
it's still open in one of my tabs for when I get the time :)
pd
On Aug 16, 11:27 am, Erik Beeson [EMAIL PROTECTED] wrote:
id is supposed to be unique is it not? My example used the # to refer
to a unique id on the page, therefore *not* an array of objects.
Wrong, it *is* still an array of objects, it's just an array of length
1. Do console.log($('#foo')) and you'll see that it is still an array,
and an array with one object in it is not the same as the object
itself.
AFAIK all three examples get an element on the page as a *single* (not
an array) object.
And that's wrong. The jQuery object is always an array. It's of length
0 for no matches, 1 for a single match, or more for multiple matches.
That's by design, so that the chaining things work consistently. This
allows you to make chained calls that won't throw an error, regardless
of whether or not the selector found anything.
I think it's reasonable (though perhaps not programmatically correct)
to see $('#foo') as the equivalent of document.getElementById('foo').
If this is not true in jQuery, which it does not appear to be, all I
Right, it's not.
am saying is this distinction should be clearly documented.
Agreed. This should probably be made clearer. I think the recently
discussed post by Simon Willison addresses this really well (under
Doing stuff with them):http://simonwillison.net/2007/Aug/15/jquery/
--Erik
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
Uh, thanks, you flatter me, but I'm not one of the people that edit the
wiki. I think it would be sweet if the web team got in touch with Simon and
asked him if we could pull that article into docs.jquery.com as an official
jQuery Primer. I think it focuses on the right introductory aspects of
jQuery better than the official documentation.
--Erik
On 8/15/07, pd [EMAIL PROTECTED] wrote:
Thanks Eric
I'll remember to consider jQuery selector results an array from now
on.
So, do you feel like updating the wiki? Sounds like you would be the
best person to do so as your understanding appears quite deep.
I had a look at Mr Willison's article yesterday but only got half way
through before getting distracted. Bizarre that it apparently has
something related to this topic? I will have to read the whole thing,
it's still open in one of my tabs for when I get the time :)
pd
On Aug 16, 11:27 am, Erik Beeson [EMAIL PROTECTED] wrote:
id is supposed to be unique is it not? My example used the # to refer
to a unique id on the page, therefore *not* an array of objects.
Wrong, it *is* still an array of objects, it's just an array of length
1. Do console.log($('#foo')) and you'll see that it is still an array,
and an array with one object in it is not the same as the object
itself.
AFAIK all three examples get an element on the page as a *single* (not
an array) object.
And that's wrong. The jQuery object is always an array. It's of length
0 for no matches, 1 for a single match, or more for multiple matches.
That's by design, so that the chaining things work consistently. This
allows you to make chained calls that won't throw an error, regardless
of whether or not the selector found anything.
I think it's reasonable (though perhaps not programmatically correct)
to see $('#foo') as the equivalent of document.getElementById('foo').
If this is not true in jQuery, which it does not appear to be, all I
Right, it's not.
am saying is this distinction should be clearly documented.
Agreed. This should probably be made clearer. I think the recently
discussed post by Simon Willison addresses this really well (under
Doing stuff with them):http://simonwillison.net/2007/Aug/15/jquery/
--Erik
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
Futher to this overall topic Eric, do you think it would be possible/
wise to implement a jQuery method that returns any of the standard DOM
properties? I'm just wishlisting but I think this syntax (each line a
different example property):
$('#foo').dom('className');
$('#foo').dom('size');
$('#foo').dom('type');
would be very intuitive for developers and very consistent with the
rest of the jQuery library.
It seems more intuitive and consistent than:
$('#foo')[0].className;
$('#foo')[0].size;
$('#foo')[0].type;
to me, though maybe the method name of dom() is not the most clear and
or explicit. It is short though :)
pd
On Aug 16, 11:27 am, Erik Beeson [EMAIL PROTECTED] wrote:
id is supposed to be unique is it not? My example used the # to refer
to a unique id on the page, therefore *not* an array of objects.
Wrong, it *is* still an array of objects, it's just an array of length
1. Do console.log($('#foo')) and you'll see that it is still an array,
and an array with one object in it is not the same as the object
itself.
AFAIK all three examples get an element on the page as a *single* (not
an array) object.
And that's wrong. The jQuery object is always an array. It's of length
0 for no matches, 1 for a single match, or more for multiple matches.
That's by design, so that the chaining things work consistently. This
allows you to make chained calls that won't throw an error, regardless
of whether or not the selector found anything.
I think it's reasonable (though perhaps not programmatically correct)
to see $('#foo') as the equivalent of document.getElementById('foo').
If this is not true in jQuery, which it does not appear to be, all I
Right, it's not.
am saying is this distinction should be clearly documented.
Agreed. This should probably be made clearer. I think the recently
discussed post by Simon Willison addresses this really well (under
Doing stuff with them):http://simonwillison.net/2007/Aug/15/jquery/
--Erik
[jQuery] Re: Documentation on $('#foo')[0] or $('#foo').get(0) ??
http://docs.jquery.com/DOM/Attributes#Attr
--Erik
On 8/15/07, pd [EMAIL PROTECTED] wrote:
Futher to this overall topic Eric, do you think it would be possible/
wise to implement a jQuery method that returns any of the standard DOM
properties? I'm just wishlisting but I think this syntax (each line a
different example property):
$('#foo').dom('className');
$('#foo').dom('size');
$('#foo').dom('type');
would be very intuitive for developers and very consistent with the
rest of the jQuery library.
It seems more intuitive and consistent than:
$('#foo')[0].className;
$('#foo')[0].size;
$('#foo')[0].type;
to me, though maybe the method name of dom() is not the most clear and
or explicit. It is short though :)
pd
On Aug 16, 11:27 am, Erik Beeson [EMAIL PROTECTED] wrote:
id is supposed to be unique is it not? My example used the # to refer
to a unique id on the page, therefore *not* an array of objects.
Wrong, it *is* still an array of objects, it's just an array of length
1. Do console.log($('#foo')) and you'll see that it is still an array,
and an array with one object in it is not the same as the object
itself.
AFAIK all three examples get an element on the page as a *single* (not
an array) object.
And that's wrong. The jQuery object is always an array. It's of length
0 for no matches, 1 for a single match, or more for multiple matches.
That's by design, so that the chaining things work consistently. This
allows you to make chained calls that won't throw an error, regardless
of whether or not the selector found anything.
I think it's reasonable (though perhaps not programmatically correct)
to see $('#foo') as the equivalent of document.getElementById('foo').
If this is not true in jQuery, which it does not appear to be, all I
Right, it's not.
am saying is this distinction should be clearly documented.
Agreed. This should probably be made clearer. I think the recently
discussed post by Simon Willison addresses this really well (under
Doing stuff with them):http://simonwillison.net/2007/Aug/15/jquery/
--Erik
