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
