最终代码：

Question

我正在尝试使用<div>循环查看一系列has()元素，以确定该元素是否具有特定类，然后使用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，如果是，请查找next()兄弟与类.hello

然后，我的想法是，如果没有next()，请使用:last和:first元素执行操作。请指教。

JS FIDDLE - http://jsfiddle.net/c4ZNm/

Answer 1

您想要这样做：

您可以使用.slide直接选择。
检查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 divs - 1用于索引。因为：last-child是你的“a”标签元素，而不是.hello div，所以相反：nth-child（3）选择器我添加了.eq（count）更加动态。

祝你好运

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/

查找Next（）div基于Class，Test查看Last Element

3 个答案:

最终代码：