Question

I have the following markup and am doing some jQuery mouseovers and am going to set the background-color. I’d also like to set the background-color of the adjacent class if the class is a .list_spacer

I currently have:

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

And am thinking there must be some way of accessing adjacent divs and setting only if of a certain class but don’t know how. Any ideas on how to do this? I only want to select if immediately before or after and has class of list_spacer

thx in advance

Answer 1

You could user .prev and .next methods to access adjacent tags.

Example:

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

To access a certain class, use:

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

You also can access parent tags:

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

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