Question

在这里，

JS CODE

$('.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>？

由于

Answer 1

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

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

它没有那样工作，我试过这个。如果我这样做的话，它不会继续下一个带有文字“...”的DIV

好的，让我再次尝试我的水晶球：

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

Answer 2

要找到下一个兄弟是div而不管它是否是下一个兄弟，请使用：

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

.next()只能找到下一个兄弟。

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

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

使用next（）跳过元素

2 个答案: