Selecting element within element of same type using Jquery

Question

I have a nested html structure like this:

<ul class="root">
    <li>Foo 1 <label class="bar-class">bar</label>
         <ul>
            <li>Foo 2 <label class="bar-class">bar</label>

            </li>

            <li>Foo 3 <label class="bar-class">bar</label>

            </li>
        </ul>
    </li>
</ul>

And so on, it is a site map so the nesting can be as deep as you like.

I am trying to show and hide the bar label on hover of the li element.

With code like this:

 $('.root li').live({
                mouseenter:
                       function () {
                           $(this).find('>.bar-class').show('slow');
                       },
                mouseleave:
                       function () {
                           $(this).find('>.bar-class').hide('fast');
                       }
            });

The problem is, that every li parent of the current also shows its bar, how do I select it so that ONLY the current item's bar gets selected?

I've tried variations but just not cracked it yet.

Thanks.

Edit 1: Fixed html tags.

Community · Accepted Answer · 2017-05-23 12:04:47Z

3

You can return false from the callback function to stop further propagation of the event up the DOM tree.

And also change to using mouseover and mouseout:

$('.bar-class').hide();

$('.root li').live({
  mouseover:
    function () { $(this).find('>.bar-class').show('slow'); return false; },
  mouseout:
    function () { $(this).find('>.bar-class').hide('fast'); return false; }
});

At this point I would like to encourage you to convert from using live to using on(), because live is deprecated.

In this case, the code becomes:

$('.root').on('mouseover mouseout', 'li', function () {
  $(this).children('.bar-class').stop(true, true).fadeToggle('slow');
  return false;
});

Reference thanks to Yoshi: http://jsfiddle.net/6FzWU/2/

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Sep 4, 2012 at 10:28

ronalchn

12.4k10 gold badges53 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

shenku Over a year ago

this is almost there, thanks, odd behaviour though, when i move from the parent li to the child li, the parent doesnt hide...? this works much better though other wise.

Yoshi Over a year ago

use mouseover, mouseout instead of mouseenter, mouseleave.

shenku Over a year ago

This is the final working version, jsfiddle.net/dNxsv/1 using input from @ronalchn and yoshi solutions

ronalchn Over a year ago

thx, I was going to fix it by creating another span container for "Foo 1 bar", but the mouseover,mouseout solution is more elegant. Also, changing to on(). Toggle also very nice.

Danil Speransky · Accepted Answer · 2012-09-04 10:37:41Z

0

Use e.preventDefault(), and also .live is deprecated, use .on

$(document).on({
  mouseenter: function (e) {
    e.preventDefault();
    $(this).children('.bar-class').show('slow');
  },

  mouseleave: function (e) {
    e.preventDefault();
    $(this).children('.bar-class').hide('fast');
  }
}, '.root li');

edited Sep 4, 2012 at 10:37

answered Sep 4, 2012 at 10:31

Danil Speransky

30.5k6 gold badges70 silver badges78 bronze badges

3 Comments

Andrea Turri Over a year ago

you don't need any e.preventDefault(), there is any postback on that hovering.

Matt Over a year ago

FYI, what you currently have is not a direct replacement for his use of live(); $(document).on({ /* event map */ }, '.root li') would be though.

Matt Over a year ago

@AndreaTurri: You need the e.preventDefault() (or at least return false; there to stop the event handler propagating to the ancestors which match the selector, so "Stop downvoting before check it on JsFiddle plz! "

Collectives™ on Stack Overflow

Selecting element within element of same type using Jquery

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related