jQuery:尝试编写我的第一个插件，如何将选择器传递给我的函数？

Question

我正在尝试开始编写一些简单的 jQuery 插件，并且在我的第一次尝试中，如果我认为我会编写一些除了应用 .first 和 .last 类之外不执行任何其他操作的东西传递的元素。

例如，我希望最终能够:

$('li').firstnlast();

因此在这个 html 结构中:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li></li>
    <li></li>
</ul>

它将创建以下内容:

<ul>
    <li class="first"></li>
    <li></li>
    <li></li>
    <li class="last"></li>
</ul>
<ul>
    <li class="first"></li>
    <li class="last"></li>
</ul>

到目前为止我在插件中写的是:

(function($) {

    $.fn.extend({
        firstnlast: function() {
            $(this)
                .first()
                .addClass('first')
                .end()
                .last()
                .addClass('last');
        }
    });
})(jQuery);

但是上面只返回这个:

<ul>
    <li class="first"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li></li>
    <li class="last"></li>
</ul>

似乎仅将 li 传递到函数中，它将查看整个页面上的所有 li 元素，然后将类应用于它。

我需要弄清楚的是，我如何才能基本上使函数“上下文感知”，以便将上述 li 传递到函数中会将这些类应用到这些 li >s 位于父 ul 内部，而不是整个页面上的第一个和最后一个 li。

任何提示、想法和帮助将不胜感激。

Answer 1

您想使用 :first-child 和 :last-child 得到那些<li>就在这里，像这样:

this.filter(':first-child:not(:last-child)').addClass('first')
    .end().filter(':last-child:not(:first-child)').addClass('last');

这得到了相对于父级的第一个和最后一个，这似乎就是你想要的，试一试:)

更新:现在处理 1 <li> 的情况里面 <ul> ，这些元素将被忽略。