根据Class查找Next() div，测试是否Last Element

Question

我正在尝试使用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 FIDDLE - http://jsfiddle.net/c4ZNm/

Answer 1

你想做这些：

1. 您可以直接使用.slide进行选择。
2. 改为检查nextUp 的长度。

试试这个，似乎是一种解决方法：

JS

$('.next').click(function() {
    var current = $('.slide');
    var nextUp = $('.slide').next('.hello');

    if( nextUp.length == 0 ) {
        $('div.hello:first').addClass('slide');
        $('div.hello:last').removeClass('slide');
    } 
    else {
        $(nextUp).addClass('slide');
        $(current).removeClass('slide');
    }
});

JSFIDDLE DEMO

Answer 2

这是工作小提琴：http://jsfiddle.net/c4ZNm/10/

而不是

$('.hello').has('.slide')

使用

$('.hello.slide')

当没有下一个元素时，nextUp 不会是''，它的长度为0。 我添加了 count 来计算所有 .hello div - 1 用于索引。因为 :last-child 是您的“a”标签元素，而不是 .hello div，所以我添加了 :nth-child(3) 选择器以更具动态性。

最好的问候

Answer 3

您的代码有一些问题。首先，.has 检查元素是否具有匹配选择器的后代。您只需要将选择器组合到.hello.slide。

var current = $('.hello.slide');

---

然后您可以重用该变量来定位下一个元素。

var nextUp = current.next('.hello');

---

你需要检查长度才能知道它是否找到了一些东西，而不是一个空字符串。

 if( nextUp.length === 0)

---

您也不需要将 current 和 nextUp 包装在 jQuery 元素中，它们已经是 jQuery 元素。

nextUp.addClass('slide');
current.removeClass('slide');

---

最终代码：

$('.next').click(function() {
    var current = $('.hello.slide');
    var nextUp = current.next('.hello');
    
    if( nextUp.length === 0) {
        $('.hello:first').addClass('slide');
        $('.hello:last').removeClass('slide');
    } else {
        nextUp.addClass('slide');
        current.removeClass('slide');
    }
});

小提琴：http://jsfiddle.net/c4ZNm/14/