我尝试通过使用has()
来循环一系列<div>
元素,以确定该元素是否具有特定的类,然后使用next()
循环到下一个元素。我没有使用hasClass()
,因为它返回true/false
,我试图将所选元素存储为变量,以便稍后在函数中使用以测试它是否是最后一个。我很可能使用了错误的选择器。
以下是示例标记:
<div class="hello"><p>Hello 1</p></div>
<div class="hello slide"><p>Hello 2</p></div>
<div class="hello"><p>Hello 3</p></div>
<a href="javascript:void(0);" class="next">NEXT ONE!</a>
例如jQuery:
$('.next').click(function() {
var current = $('.hello').has('.slide');
var nextUp = $('.hello').has('.slide').next();
if( nextUp == '' ) {
$('.hello:first').addClass('slide');
$('.hello:last').removeClass('slide');
} else {
$(nextUp).addClass('slide');
$(current).removeClass('slide');
}
});
所以,我想看看类为.hello
的元素是否有类.slide
,如果有,找到类为.hello
的next()
兄弟元素。
然后,我的想法是,如果没有next()
,则使用:last
和:first
元素执行操作。请指示。
JS小提琴-http://jsfiddle.net/c4ZNm/
3条答案
按热度按时间lokaqttq1#
您希望执行以下操作:
1.您可以使用
.slide
直接选择。1.检查
nextUp
的长度。试试这个,似乎是一个解决方案:
JS
JSFIDDLE DEMO
bmp9r5qi2#
这里是工作小提琴:http://jsfiddle.net/c4ZNm/10/
而不是
使用
当没有下一个元素时,nextUp不会是'',它的长度将是0。我添加了count来计数所有。Hello divs - 1用于索引。因为:last-child是你的“a”标签元素,而不是.hello div,所以我添加了:nth-child(3)选择器.eq(count)来更动态。
最好的问候
eit6fx6z3#
你的代码有一些问题。首先,
.has
检查元素是否有匹配选择器的后代。您只需要将选择器组合到.hello.slide
。然后可以重用该变量来定位下一个元素。
您需要检查长度,以了解它是否找到了一些东西,而不是空字符串。
您也不需要将
current
和nextUp
Package 在jQuery元素中,它们已经是jQuery元素了。最终代码:
小提琴:http://jsfiddle.net/c4ZNm/14/