Hi,
I am trying to start writing some simple jQuery plugins and for my first try if figured I would write something that does nothing else but apply .first & .last classes to passed
elements.
so for instance i want to ultimately be able to:
$('li').firstnlast();
So that in this html structure:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
it would create the following:
<ul>
<li class="first"></li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
<ul>
<li class="first"></li>
<li class="last"></li>
</ul>
What i have written so far in my plugin is this:
(function($) {
$.fn.extend({
firstnlast: function() {
$(this)
.first()
.addClass('first')
.end()
.last()
.addClass('last');
}
});
})(jQuery);
However the above only returns this:
<ul>
<li class="first"></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li class="last"></li>
</ul>
It seems that passing only the li into the function it will look at all li
elements on the entire page and then apply the classes to it.
What I need to figure out is how i can basically make the function 'context aware' so that passing the above li into the function would apply the classes to those lis inside of the parent ul, not to the first and last li on the entire page.
Any hints, ideas and help would be much appreciated.
Thanks for reading,
Jannis
