jQuery .first() 和 .last() 的工作方式不同吗?

发布于 2024-12-10 11:37:30 字数 1091 浏览 0 评论 0原文

因此,我正在使用此标记构建一个简单的幻灯片控件:

<div class="previous"> </div>
<div class="next"> </div>
<div class="gallery"> </div>
    <div class="image-0"> </div>
    <div class="image-1"> </div>
    <div class="image-2"> </div>
    <div class="image-3 active"> </div>
    <div class="image-8"> </div>
    <div class="image-9"> </div>
    <div class="image-10"> </div>
    <div class="image-11"> </div>
</div>

并且我尝试使用 jQuery 进行导航,如下所示:

$('.next').click(function() {

    $('.active').next().addClass('active');
    $('.active').first().removeClass('active');


  });
$('.previous').click(function() {

    $('.active').prev().addClass('active');
    $('.active').last().removeClass('active');

});

因此,第一个 jQuery 块按预期工作,首先将 active 类分配给下一个 div,然后将其从第一个 div 中删除。第二个块应该以相反的方式执行此操作,但在将最后一项添加到前一项后,不会从最后一项中删除该类。

我是否从错误的角度处理这个问题?或者first() 和last() 函数的工作方式是否不同?从我从 jquery 文档中可以看出,这应该有效。

So, i'm building a simple slideshow control with this markup:

<div class="previous"> </div>
<div class="next"> </div>
<div class="gallery"> </div>
    <div class="image-0"> </div>
    <div class="image-1"> </div>
    <div class="image-2"> </div>
    <div class="image-3 active"> </div>
    <div class="image-8"> </div>
    <div class="image-9"> </div>
    <div class="image-10"> </div>
    <div class="image-11"> </div>
</div>

and i'm trying to navigate using jQuery like this:

$('.next').click(function() {

    $('.active').next().addClass('active');
    $('.active').first().removeClass('active');


  });
$('.previous').click(function() {

    $('.active').prev().addClass('active');
    $('.active').last().removeClass('active');

});

So, the first jQuery block works as expected, first assigning the activeclass to the next div and then removing it from the first. The second block should just do it the other way around, but is doesn't remove the class from the last item after adding it to the previous one.

Am i approaching this problem from the wrong side? Or do the first() and last() functions just work differently? From what i could tell from the jquery docs, this should be working.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

浪荡不羁 2024-12-17 11:37:30

我用你的代码创建了一个jsfiddle,它工作正常: http://jsfiddle.net/K5vN4/

(使用 Firebug 或类似工具检查小提琴的“结果”区域。)

I created a jsfiddle with your code, and it works fine: http://jsfiddle.net/K5vN4/

(use Firebug or similar to inspect the "Result" area of the fiddle.)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文