Jquery遍历的next()方法和prev()方法的使用

如果想快速查找指定元素集合中每一个元素紧邻的下一个同辈元素的元素集合，此时可以用next()方法。

$("button:last").click(function() {
        //找到所有class=item-2的li
        //然后筛选出第一个，加上蓝色的边
       $('.item-1').next(':first').css('border', '1px solid blue')

    })

此函数是说明找到对应的class为.item-1下一个的.item-2的li标签，并筛选出第一个li元素加上CSS样式。

 

如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法。

$("button:last").click(function() {
        //找到所有class=item-2的li
        //然后筛选出第一个，加上蓝色的边
       $('.item-3').prev(':first').css('border', '1px solid blue')

    })

此函数是说明找到对应的class为.item-3上一个的.item-2的li标签，并筛选出第一个li元素加上CSS样式。

注意：

next()方法和prev()方法没有带参数的话，说明是获取了集合，对获取到的集合都将一起改变样式，针对上面的例子来说。例如：

$("button:last").click(function() {
        //找到所有class=item-2的下的所有li
       $('.item-3').prev(').css('border', '1px solid blue')

    })

此函数是说明找到对应的class为.item-3上一个的.item-2的所有li标签，并为它们都附加边框为蓝色的样式。

更多关于此方面的知识，欢迎读者在下方留言。我们一起学习交流。