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 传递到函数中会将类应用于父ul 内部的lis，不要到整个页面上的第一个和最后一个li。

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

Answer 1

您想使用:first-child 和:last-child 将<li>s 放在这里，如下所示：

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

这得到了第一个和最后一个与父级相关的，这似乎是你所追求的，试一试:)

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

Answer 2

(function($) {

    $.fn.extend({
        firstnlast: function() {
            $(this).parent()
                .find("li:eq(0)")
                .addClass('first')
                .end()
                .find("li:eq(-1)")
                .addClass('last');
        }
    });
})(jQuery);