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'); // 
});

<强> Check Fiddle

Answer 3

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

$（函数（）{ $（ 'LIST_ITEM '）。在（' 鼠标悬停'，函数（）{

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

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

});
});

jquery选择相邻的项目，如果它们是特定的类名称

3 个答案: