0

次のマークアップがあり、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のクラスがあります

事前にt​​hx

4

3 に答える 3

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');
于 2012-11-21T06:26:35.143 に答える
1

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

フィドルをチェック

于 2012-11-21T06:32:50.623 に答える
1

リストには内容と幅がないため、背景色は反映されないため、背景色の代わりに境界線を使用してください。

$（function（）{$（'。list_item'）。on（'mouseover'、function（）{

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

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

});
});
于 2012-11-21T06:57:26.940 に答える