jqueryの現在の要素配列の次の要素にクラスを追加するには？

Question

私はそのようなことをする方法を知りたいです。

私はこのようなものがあります：私はホバーに要素をaddClassする必要が

<ul> 
    <li><a href="1.html">first item</a></li> 
    <li><a href="2.html">second item</a></li> 
    <li><a href="3.html">third item</a></li> 
    <li><a href="4.html">fourth item</a></li> 
</ul> 

を、これは簡単で、私はこのようにそれを実行します。

$("li a").hover(
    function() { 
     $(this).addClass("show"); 
    }, 
    function() { 
     $(this).removeClass("show"); 
    } 
); 

しかし、私はすべての次のli要素にaddClassする必要がありますまた、

first li eleemntは、第2要素のにに追加されます。

これを行う方法？

Answer 1

が1行で記述することができますが、この

$("li a").hover(
       function() { 
       $(this).addClass("show").parent().next().addClass("show2");    


       }, 
       function() { 
       $(this).removeClass("show").parent().next().removeClass("show2"); 

       } 
      ); 

Answer 2

$("li a").hover(function() { 
    $(this).addClass("show"); 
    var next_li = $(this).parent().next(); 
    $('a', next_li).addClass("show2"); 
}, 
function() { 
    $(this).removeClass("show"); 
    var next_li = $(this).parent().next(); 
    $('a', next_li).removeClass("show2"); 
}); 

を試してみてください。

私は常に複数の行を使いたいと思います。

Answer 3

parent()とnext()とfind()を使用して、次のアンカー要素と一致させることができます。

そこから、あなたは現在のセットにホバー要素を追加するためにadd()を使用することができ、単一の呼び出しで両方の要素でtoggleクラス：

EDIT：以上かかりませんクラス名はshow2です。 （証拠としてthis jsfiddleを参照してください）あなたは、次のコードでこれを達成することができます

$("li a").hover(function() { 
    $(this).toggleClass("show").parent().next().find("a").toggleClass("show2"); 
}); 

Answer 4

：それをサポートするために、あなたのような何かを行うことができます。これは、要素のセット内の項目のリストを処理し、その数に基づいて、それらのそれぞれに異なるイベントを割り当てます。

var my_list = jQuery('ul'); 
my_list.find('li').each(function(index, element){ 
    if (index == 0){ 
     jQuery(this).hover(function(){ 
      my_list.find('li a').addClass('show'); 
     }, function(){ 
      my_list.find('li a').removeClass('show'); 
     }); 
    } else { 
     jQuery(this).hover(function(){ 
      my_list.find('li:gt('+(index-1)+') a').addClass('show'); 
     }, function(){ 
      my_list.find('li:gt('+(index-1)+') a').removeClass('show'); 
     }); 
    } 
}); 

EDIT：私は今、私はあなたを誤解参照 - 私の解決策は、showクラスを追加しますが最初の要素だけでなく次のすべての要素にも適用されます。

Answer 5

Jqueryのnext関数を使用して次の要素を取得できます。

JsFiddle：jsfiddle.net/ra368sgj

$("li a").hover(
    function() { 
     $(this).addClass("show").parent().next().addClass("show2"); 
    }, 
    function() { 
     $(this).addClass("show").parent().next().addClass("show2").removeClass("show2"); 
    } 
);