Any objections, Mike? If not, I'll post it for you.
thanks,
Karl
___________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Nov 7, 2006, at 11:15 AM, Brandon Aaron wrote:
> This excellent explanation should probably be on learningjquery.com.
>
> On 11/6/06, Michael Geary <[EMAIL PROTECTED]> wrote:
>>> From: Simon Corless
>>> Thanks for the help Mike, it's starting to come together.
>>> I've been testing it just now.
>>>
>>> If I do use return this.each() then how do I reference the
>>> jQuery methods? without this.hover() etc? Obviously as this
>>> is no longer what I am expecting this.hover (as you say)
>>> fails. So do I use my 'self' variable or another way?
>>
>> If you are calling each(), that means your plugin may operate on
>> more than
>> one element, right? If you do "var self = this;" outside the each
>> () call,
>> that is a reference to the entire jQuery object - an array of all
>> the DOM
>> elements. The reason you would call each() is to operate on those
>> elements
>> one by one. So in most cases that 'self' isn't what you want
>> inside the
>> each() inner function.
>>
>> In that inner function 'this' is the individual DOM element, so if
>> you want
>> a jQuery object for that element, use $(this).
>>
>> Let's try some more descriptive names instead of "self" and "this":
>>
>> (function( $ ) {
>> $.fn.twiddle = function() {
>> var $all = this;
>> $all.each( function() {
>> var element = this, $element = $(element);
>> // Now we have:
>> // $all - jQuery obect for all matching elements
>> // $element - jQuery obect for a single element
>> // element - a single element itself
>> });
>> };
>> })( jQuery );
>>
>> Now you can write the entire plugin using meaningful names. In
>> practice, I
>> tend to use shorter names like e and $e instead of element and
>> $element, but
>> I used the longer ones here to make it more descriptive.
>>
>> Remember that if the plugin doesn't need to work on the individual
>> DOM
>> elements but only uses jQuery methods on the whole collection,
>> then you
>> don't need an each() loop at all.
>>
>> Contrast a plugin that sets all matching elements to the same
>> random color:
>>
>> (function( $ ) {
>> $.fn.twiddle = function() {
>> var $all = this;
>> $all.background( randomColor() );
>> };
>> })( jQuery );
>>
>> vs. a plugin that sets each matching element to a different random
>> color:
>>
>> (function( $ ) {
>> $.fn.twiddle = function() {
>> $all.each( function() {
>> var element = this, $element = $(element);
>> $element.background( randomColor() );
>> });
>> };
>> })( jQuery );
>>
>> Note the use of the $ prefix to indicate that a variable is a
>> jQuery object,
>> and the use of matching names with and without the $ when you have
>> both a
>> DOM element and a matching jQuery object for that element only. A
>> similar
>> use of this pattern is:
>>
>> var $foo = $('.foo'), foo = $foo[0];
>>
>> This is for typical non-plugin code where you're starting with a
>> query.
>> Instead of writing code like this:
>>
>> $('.foo').zip();
>> // more code
>> $('.foo').zoom();
>> // more code
>> $('.foo').fly();
>>
>> You'd write:
>>
>> var $foo = $('.foo');
>> $foo.zip();
>> // more code
>> $foo.zoom();
>> // more code
>> $foo.fly();
>>
>> In this case we're not using any DOM methods, so we only use $foo
>> and not
>> foo.
>>
>>> I thought I saw someone just using
>>> .hover() (without any prefix) but this just fails.
>>
>> You probably saw code like:
>>
>> $('.foo')
>> .zip()
>> .zoom()
>> .fly();
>>
>> That's a single line of code split into multiple lines. It's the
>> same as:
>>
>> $('.foo').zip().zoom().fly();
>>
>>> I don't fully understand the difference, currently I don't
>>> use any dom methods I just use jQuery (I partly thought
>>> that was the point of it? - Although I realise sometimes
>>> you need to go deeper).
>>
>> jQuery doesn't try to provide its own equivalent of every possible
>> DOM
>> property and method, so it's pretty handy to be able to mix and
>> match when
>> you need to.
>>
>>> Basically I have 3 internal functions defined in two ways as:
>>>
>>> nextItem = function ()
>>> or
>>> function pause()
>>>
>>> Am I right in thinking that nextItem() could be called
>>> through a jQuery chain and that pause() can only be called
>>> internally from my plugin? Or are they both the same just
>>> written differently?
>>
>> Those are just different ways of writing functions - they have
>> little or
>> nothing to do with how a function can be used.
>>
>> For example, these are essentially identical, creating functions
>> in the
>> current scope:
>>
>> var foo = function(){};
>>
>> function foo(){}
>>
>> If I left off the "var", the first one would create a global
>> function:
>>
>> foo = function(){};
>>
>> That is usually a mistake, as it is in your code - your nextItem
>> should be
>> either:
>>
>> var nextItem = function()...
>>
>> or:
>>
>> function nextItem()...
>>
>> The latter would be more consistent with the rest of your code, so
>> that's
>> what I'd use.
>>
>> Another coding tip or two...
>>
>> You have several places with code like this:
>>
>> settings['blank']
>>
>> That's OK, but you can substitute the simpler:
>>
>> settings.blank
>>
>> I would change this code:
>>
>> if (items[i]['link']) {
>> self.html("<a href=\"\">" + items[i]['item'] + "</a>");
>> } else {
>> self.html(items[i]['item']);
>> }
>>
>> to:
>>
>> var item = items[i];
>> if (item.link) {
>> self.html('<a href="">' + item.item + '</a>');
>> } else {
>> self.html(item.item);
>> }
>>
>> Or, even better:
>>
>> var item = items[i];
>> self.html( item.link ? '<a href="">' + item.item + '</a>' :
>> item.item );
>>
>> -Mike
>>
>>
>> _______________________________________________
>> jQuery mailing list
>> [email protected]
>> http://jquery.com/discuss/
>>
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
