jquery 根据Class查找Next()div,测试最后一个元素是否

iklwldmw  于 2023-06-22  发布在  jQuery
关注(0)|答案(3)|浏览(153)

我尝试通过使用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,如果有,找到类为.hellonext()兄弟元素。
然后,我的想法是,如果没有next(),则使用:last:first元素执行操作。请指示。
JS小提琴-http://jsfiddle.net/c4ZNm/

lokaqttq

lokaqttq1#

您希望执行以下操作:
1.您可以使用.slide直接选择。
1.检查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

bmp9r5qi

bmp9r5qi2#

这里是工作小提琴: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)来更动态。
最好的问候

eit6fx6z

eit6fx6z3#

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

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

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

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

您需要检查长度,以了解它是否找到了一些东西,而不是空字符串。

if( nextUp.length === 0)

您也不需要将currentnextUp Package 在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/

相关问题