gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 08:27:40 25 4
gpt4 key购买 nike

我正在尝试开始编写一些简单的 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

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

最佳答案

您想使用 :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> ,这些元素将被忽略。

关于jQuery:尝试编写我的第一个插件,如何将选择器传递给我的函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2569023/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com