Hello,
today I decided to look into jquery plugins, and with the help of various tutorials I have produce a very simple one that changes the colour of some elements in a page. I would appreciate some help in understanding whether there is something else that I need to do to make it bullet proof (I am sure this plug in in itself is completely useless but it was a good exercise for me to understand how the whole plugin world works).
So here is the HTML first:

<div class="divContainer">
<p>Changing colour plugin</p>
<div class="square">Square 1</div>
<div class="square">Square 2</div>
<div class="square">Square 3</div>
<div class="square">Square 4</div>
<div class="square">Square 5</div>
<div class="square">Square 6</div>
<div class="square">Square 7</div>
<div class="square">Square 8</div>
<button class="changeColour">change colour</button>
</div>

Then the CSS:

.divContainer{
    width:600px;
    height:300px;
    background-color:grey;
    position:absolute;
    top:450px;
}
.square{
    background-color:red;
    width:50px;
    height:50px;
    margin-right:10px;
    float:left;
}

And the script:

$(".changeColour").click(function(){
$(".square").colourThem({
background: 'yellow',
color: 'red'
});
});


/*plugin with options*/
(function($){
$.fn.colourThem = function( options ){
//declare defaults
var defaults = {
background:'green',
color:'white'
}
var settings = $.extend({}, defaults, options );//new object merging defaults and options

this.css({ "backgroundColor": settings.background, 
"color": settings.color
});
return this;
}
}(jQuery));

So, in one of the tutorials (this one is brilliant by the way http://net.tutsplus.com/articles/news/you-still-cant-create-a-jquery-plugin/) I have read that when we build plug-ins since we return an object that contains many elements we need to cycle through them with this.each(function() { }.
In my case I have added that to have this

(function($){
$.fn.colourThem = function( options ){
//declare defaults
var defaults = {
background:'green',
color:'white'
}
var settings = $.extend({}, defaults, options );
this.each(function() {  
this.css({ "backgroundColor": settings.background, 
            "color": settings.color
});
}
return this;
}
}(jQuery));

but this breaks my plug-in. What have I done wrong?
thanks

I love messing around making jQuery plugins.

Here is yours working with the .each() all though, not really sure why you would need it. It should set the background color on all of them already.

http://jsfiddle.net/pixelsoul/yQFJA/

I'm pretty new to the whole plugin thing as well, but I am guessing that pixelsoul is indicating you dont need the .each() because if you look carefully at the code, you are already "targetting" all of the div elements with a class name of "square". Therefore, you dont have to loop through each of them.

Thanks for the demonstration pixelsoul.
I think I know why it didn't work when I did it. Basically I have used this. as opposed to $(this) so I was cycling through the object as opposed to the elements.
Anyway, you guys say I don't need the .each() in this case, which brings me to the next question: when is it that I need it, why would/would I not need it?

Take a look at the jQuery documentation for the .each() method online: http://api.jquery.com/each/

There are several simple, good examples for the use of the .each() method.

Hi thanks, yes I did JorgeM and it's kind of clear how to use it, but I thought that in the context of a plugin it was somehow different, that's why I asked :-)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.