如何將類添加到jquery中當前元素數組的下一個元素？

我想知道如何做這樣的事情。如何將類添加到jquery中當前元素數組的下一個元素？

例如我有這樣的事情：

<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>

我需要addClass到懸停元素，這是很容易我不喜歡這樣寫道：

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

不過，我需要addClass每下一個li元素也。

因此，當例如第一個li a eleemnt正在徘徊在班級show2將被添加到li a的第二個li元素。

如何做到這一點？

來源

2011-08-07 lorenc55

試試這個

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


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

       } 
      );

來源

2011-08-07 13:22:06 ShankarSangoli

感謝桑卡它的工作原理）。 – lorenc55

感謝這引導我在正確的方向與一些困擾我的問題:) – Nishant

$("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"); 
});

雖然可以在一行中寫入。

爲了便於閱讀，我總是喜歡使用多行。

來源

2011-08-07 13:22:48 PeeHaa

您可以使用parent()和next()和find()來匹配下一個錨點元素。

編輯：以上不走

從那裏，你可以使用add()到懸停的元素添加到當前集，toggle與單個調用這兩個元素的類替代show2類名考慮在內。爲了支持它，你可以這樣做：

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

來源

2011-08-07 13:26:32

您可以通過下面的代碼實現這一點（見this jsfiddle作爲證明）。它會處理的項目清單，並指定爲他們每個人不同的事件，根據其數量元素的集合內：

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

編輯：我現在看到我誤解你了 - 我的解決方案將增加show類到每一個下一個元素，而不僅僅是第一個元素。

來源

2011-08-07 13:37:51 Tadeck

您可以使用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"); 
    } 
);

來源

2016-10-05 13:57:57 Rajesh

你能解釋一下你的答案嗎？將每個下一個元素的addClass添加到 –

。因此，例如，第一個元素是將一個元素懸停在show2中的類將被添加到第二個li元素的li中。 – Rajesh

將其添加到答案中，以便其他人會理解您的答案正在做什麼。 –

如何將類添加到jquery中當前元素數組的下一個元素？

回答

相關問題