jQuery选择下一个div

8 浏览
0 Comments

jQuery选择下一个div

如何在悬停在当前链接1上时更改div1的代码？

    
    
  • 
        
        
    
    • 
    
  • 
        
        
    
    •

我尝试了以下方法：

$(".link1").hover(
function () {
        $(this).nextAll('.div1').css('display','block');
        ...
    },
    function () {
        ...
    }
);

0

2 答案

0 Comments

问题的出现原因是误用了.closest()方法。.closest()方法是用来在元素的父辈元素中查找与给定选择器匹配的最近的祖先元素。而在上述代码中，作者本意是要在当前元素的下一个兄弟元素中查找与给定选择器匹配的元素，因此应该使用.next()方法。

解决方法是将.closest()方法替换为.next()方法。修改后的代码如下：

$(".link1").hover(function(){
   $(this).parent().find(".div1").css('display','block');
}, function(){
   //
})

0
0 Comments

问题：为什么使用.next和.nextAll无法选择到目标元素？如何解决这个问题？

原因：因为.next和.nextAll只会搜索“直接兄弟节点”，而目标元素是链接的兄弟节点的子元素。

解决方法一：可以尝试使用以下代码来选择目标元素：

$(this).next('.link2').children('.div1')

解决方法二：或者可以通过遍历到父元素，然后搜索所有后代元素来选择目标元素：

$(this).parent().find('.div1')

0