jquery - jquery选择相邻的项目，如果他们是一个特定的类名

Question

我有以下标记，并且正在做一些 jQuery 鼠标悬停，并将设置背景颜色。如果类是 .list_spacer，我还想设置相邻类的背景颜色

我目前有：

<div class='lists_items'>
<div class='list_item'>info here</div>
<div class='list_spacer'></div>
<div class='list_item'>info here</div>
<div class='list_spacer'></div>
<div class='list_item'>info here</div>
<div class='list_spacer'></div>
<div class='list_item'>info here</div>
</div>

$('.list_item').on('mouseover',function(){
  $(this).css('background-color','yellow'); // <- yeah, the simplest possible scenario
});

并且我认为必须有某种方法可以访问相邻的 div 并仅设置某个类但不知道如何设置。关于如何做到这一点的任何想法？我只想选择是否立即在之前或之后并且具有 list_spacer 类

提前谢谢

Answer 1

您可以访问相邻标签的用户.prev和方法。.next

例子：

$('.list_item').on('mouseover',function(){
  $(this).prev().css('background-color','yellow');
});

要访问某个类，请使用：

$('.list_item').on('mouseover',function(){
  $(this).prev('.list_spacer').css('background-color','yellow');
});

您还可以访问父标签：

<div class='list_item'>
     <div class='list_spacer'></div>
</div>

$('.list_spacer').parent().css('background-color','yellow');

Answer 2

尝试使用.next('.list_spacer')或.prev('.list_spacer')

$('.list_item').on('mouseover',function(){
   var $this = $(this);

    var $div = $this.prev('.list_spacer').length ? $this.prev('.list_spacer')
                                                 : $this.next('.list_spacer') ;

    $div.css('background-color','yellow'); // 
});

检查小提琴

Answer 3

使用边框代替背景颜色，因为列表没有内容和宽度，因此不会反映背景颜色。

$(function(){ $('.list_item').on('mouseover',function(){

$(this).css('background-color','yellow'); 

$(this).next('.list_spacer').css('border','1px solid green');

});
});