problems with selectors on this

problems with selectors on this

I want to use the :first selector on this but something is wrong because the action is done on the html tag.

Example:
  1. <html>
  2. <head><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  3. <script type="text/javascript">
  4. (function($) {
        $.fn.myplugin = function() {

  5.         $(this+":first").addClass("firstparent");
  6.         $(this+":last").addClass("lastparent");
  7.         return this.each(function() {
  8.             $(this).children(":first").addClass("firstchild");
  9.             $(this).children(":last").addClass("lastchild");
  10.         });
  11.     }
  12. })(jQuery);
  13. </script>
  14. </head>
  15. <body>
  16. <ul>
  17. <li>1.1</li>
  18. <li>1.2</li>
  19. </ul>
  20. <ul>
  21. <li>2.1</li>
  22. <li>2.2</li>
  23. </ul>
  24. <script type="text/javascript">jQuery("ul").myplugin();</script>
  25. </body>
  26. </html>
It should like this:
  1. <html>
  2. [...]
  3. <body>
  4. <ul class="firstparent">
  5. <li class="firstchild">1.1</li>
  6. <li class="lastchild">1.2</li>

  7. </ul>
  8. <ul class="lastparent">
  9. <li class="firstchild">2.1</li>
  10. <li class="lastchild">2.2</li>

  11. </ul>
  12. <script type="text/javascript">jQuery("ul").myplugin();</script>
  13. </body>
  14. </html>
But it looks like this:
  1. <html class="firstparent">
  2. [...]
  3. <body>
  4. <ul>
  5. <li class="firstchild">1.1</li>
  6. <li class="lastchild">1.2</li>

  7. </ul>
  8. <ul>
  9. <li class="firstchild">2.1</li>
  10. <li class="lastchild">2.2</li>

  11. </ul>
  12. <script class="lastparent" type="text/javascript">jQuery("ul").myplugin();</script>
  13. </body>

  14. </html>
I have tested a lot of things but can't find the solution on my self.