使用next(）跳过一个元素

skip an element using next()

本文关键字：一个 元素 next 使用      更新时间：2023-09-26

在这里，

http://jsfiddle.net/sjKgF/78/

JS代码

$('.display_box').hover(function (){            
    $(this).attr('class', 'display_box current')
}, function (){
    $(this).attr('class', 'display_box');
});

$('#search').keyup(
function (e){
    var curr = $('#display').find('.current');
    if (e.keyCode == 40) 
    {                                      
        if(curr.length)
        {
                $(curr).attr('class', 'display_box');
                $(curr).next().attr('class', 'display_box current');
        }
        else{
            $('#display div:first-child').attr('class', 'display_box current');
        }                    
    }
    if(e.keyCode==38)
    {                                        
        if(curr.length)
        {                            
                $(curr).attr('class', 'display_box');
                $(curr).prev().attr('class', 'display_box current');
        }
        else{
            $('#display div:last-child').attr('class', 'display_box current');
        }            
    }
}        
)​

ELEMTS

<input type="text" id="search" name="search_fld"/>
<div id="display">
<div class="display_box current">Luca</div>
<div class="display_box">David</div>
<p class="other">Mark</p>
<div class="display_box">...</div>
</div>

​如何跳过<p>元素，只使用<div>继续？

感谢

将选择器传递给.next():

$(curr).next('div').attr('class', 'display_box current');

这样不行，我试过了。如果我做，它不会继续到带有文本"…"的下一个DIV

好吧，让我再试试我的水晶球：

$(curr).nextAll('div').first().attr('class', 'display_box current');

要查找作为div的下一个同级，而不管它是否是下一个同类，请使用以下命令：

$(curr).nextAll("div").eq(0).attr('class', 'display_box current');

.next()只找到下一个同级。

.next(selector)获取下一个同级，但只有在匹配选择器时才返回，否则，它将返回一个空的jQuery对象。

因此，如果你想找到与选择器匹配的下一个同级，无论它是否是下一个同类，那么你需要使用.nextAll(selector)，如果你只想要第一个，你可以用.eq(0)或.first()将其缩小到第一个。

相关文章：