CODEWITHSUNDEEP
jqueryjquery-selectors
danyg
danyg

Reputation: 73

Jquery select next element

I have the next menu structure.

<li class="menu-422"><a href="item-1" title="">Item 1</a></li>
<li class="menu-444"><a href="item-2" title="">Item 2</a></li>
<li class="menu-449"><a href="item-3" title="">Item 3</a></li>
<li class="menu-452"><a href="item-4" title="">Item 4</a></li>

In this structure the items (the a-tag) have background. I want to change the background of the next item on hover event. If I'm over the Item 2 I want to change the background of the Item 3. I tried it with jQuery, but I didn't find the appropriate code.

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

I tried it with nextAll, with full selector path, but I can't select the next element.

Upvotes: 7

Views: 22238

Answers (2)

Joseph Silber
Joseph Silber

Reputation: 219910

Upon hover, you want to go up to the parent li, then use next() to get to the next li, then find('a') inside of that li:

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

Upvotes: 13

ShankarSangoli
ShankarSangoli

Reputation: 69905

Instead of selecting the anchors you can just select li and attach hover event on it. And in the hover just use next method to get the next li element and change the background. I am assuming you dont have background set to the anchor's because I am changing the background of the li element.

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

Upvotes: 0

Related Questions