jquery select next element

jquery jquery-selectors
jquery select next element

次のメニュー構造があります。

Item 1
Item 2
Item 3
Item 4

この構造では、アイテム(aタグ)に背景があります。 ホバーイベントで次のアイテムの背景を変更したい。 アイテム2を超えた場合、アイテム3の背景を変更します。 jQueryで試しましたが、適切なコードが見つかりませんでした。

jQuery("#mymenu li a").hover(function() {
  jQuery(this).next("li a").css('background', 'none');
}

セレクタパスをフルにしてnextAllで試しましたが、次の要素を選択できません。

  7  2


ベストアンサー

ホバーしたら、親の li`に移動し、 next() を使用して次の li`を取得し、その li`の内部で find( ‘a’) `を使用します。

$("#mymenu li a").hover(function() {
    $(this).parent().next().find("a").css('background', 'none');
});

13


アンカーを選択する代わりに、「li」を選択して「hover」イベントをアタッチするだけです。 また、ホバーでは、 next`メソッドを使用して次の li`要素を取得し、背景を変更します。 li要素の背景を変更しているため、アンカーに背景を設定しないでください。

$("#mymenu li").hover(function() {
    $(this).next().css('background', 'none');
    //If you want to change the background of anchor try this
    //$(this).next().find('a').css('background', 'none');
}

0


タイトルとURLをコピーしました