[jQuery] setting an attribute... I *thought* this was how to doit...

[jQuery] setting an attribute... I *thought* this was how to doit...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.5730.11" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#ffffff>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007>Chris, it's like this... ;-)</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007>$() returns a jQuery object, which is an array of DOM
elements with jQuery methods that apply either to the entire array or to the
first element in the array, depending on the method.</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007>One of those methods is .each(), which loops through
the DOM element array and calls your function on each one, setting "this" to the
individual DOM element.</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007>So, inside a $().each( ... ) function, "this" refers to
a specific DOM element. You can call DOM methods on that element and access its
attributes and properties using ordinary JavaScript.</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007>You can wrap a DOM element with $(element) to get a
jQuery object containing that single DOM element. You can then call jQuery
methods on that object.</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007>In many cases, you can use either one interchangeably.
Inside an each() function, these would do the same thing:</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007>   alert( this.innerHTML
);</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007>   alert( $(this).html()
);</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007>as would these:</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007>   alert( this.id );</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007>   alert( $(this).attr('id')
);</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007>Naturally, the first one of each of these pairs is
faster and is recommended in most cases.</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT face=Verdana color=#0000ff size=2><SPAN
class=421481318-05012007>-Mike</SPAN></FONT></DIV><FONT face=Verdana
color=#0000ff size=2></FONT><FONT face=Verdana color=#0000ff size=2></FONT><FONT
face=Verdana color=#0000ff size=2></FONT><BR>
<BLOCKQUOTE dir=ltr
style="PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #0000ff 2px solid; MARGIN-RIGHT: 0px">
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left><FONT
size=-1><FONT face="Courier New, Courier, monospace">Mike, thanks so much for
the advice! :o)<BR><BR>I guess I'm still fuzzy on when I can use 'this' as
opposed to '$(this)'. I would love to use this.myAttr, but didn't think I
could. I really, really appreciate you re-writing my code snippet to show me
what you're talking about. I know that the 'this' vs. '$(this)' discussion was
had not too long ago, but I didn't (or couldn't) pay too much attention at the
time. If you'd rehash it for me, or point me to the old thread, I'd appreciate
that too!
:o)<BR><BR>Cheers,<BR>Chris</FONT></FONT></DIV></BLOCKQUOTE></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/