jQuery .first() 和 .last() 的工作方式不同吗?
因此,我正在使用此标记构建一个简单的幻灯片控件:
<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 active
class 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我用你的代码创建了一个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.)