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/
