I am using jquery next and cosest options to select only one element but this applies classes to every element

Question

My HTML menu is like this

<div style="margin-top: 200px; width: 140px; text-align: left; line-height: 20px;">
    <div class="lmenu">Home</div>
    <div class="lmenu">About Us</div>
    <div class="lmenu parent">Our Services
        <div class="subparent">
            Event Management
                <div class="child">
                Categories
                </div>
                <div class="child">
                Providing Facilities
                </div>
        </div>
        <div class="subparent">
            Rental
            <div class="child">
                AVEquipments
            </div>
            <div class="child">
                Other Services
            </div>
        </div>
        <div class="subparent">
            Exhibition Stalls 
            <div class="child">
                Standard Stall
            </div>
            <div class="child">
                Designed Stalls
            </div>
        </div>
    </div>
    <div class="lmenu parent">About Us
        <div class="subparent">
            Our Company
            <div class="child">
                Categories
            </div>
            <div class="child">
                Our Team
            </div>
        </div>
    </div>
</div>

and I am using jQuery on mouseover and mouseout functions to view sub items. but when I hovering only one menu item every sub menu is going to visible.

here is my jquery

var $sub_itmes;
$(".parent").on({
    mouseover: function() {
        $sub_itmes = $(".lmenu").next().find(".subperent");
        $sub_itmes.css({
            "display": "block",
        });
        $sub_itmes.animate({
            "opacity": 1
        });
    },
    mouseleave: function() {
        $sub_itmes = $(".lmenu").next().find(".subperent");
        $sub_itmes.css({
            "display": "none",
        });
        $sub_itmes.animate({
            "opacity": 0
        });
    }
});

$(".subperent").on({
    mouseover: function() {
        $sub_itmes = $(this).closest('.lmenu').find(".chilld");
        $sub_itmes.css({
            "display": "block",
        });
        $sub_itmes.animate({
            "opacity": 1
        });
    },
    mouseleave: function() {
        $sub_itmes = $(this).closest('.lmenu').find(".chilld");
        $sub_itmes.css({
            "display": "none",
        });
        $sub_itmes.animate({
            "opacity": 0
        });
    }
});

I can't find where I'm wrong.

Thank You.

Answer 1

your find was doing this

1. from current element find .lmenu (which is the parent)
2. now find all .chilld inside top parent (which will find all of them)
3. show/hide them

By using the syntax $(query,scope) you can find an element that is within the current selection.

var $sub_itmes;
$(".parent").on({
    mouseover: function() {
        $sub_itmes = $('.subperent',this);
        $sub_itmes.fadeIn('slow');
    },
    mouseleave: function() {
        $sub_itmes = $('.subperent',this);
        $sub_itmes.fadeOut('slow');
    }
});

$(".subperent").on({
    mouseover: function() {
        $sub_itmes = $('.chilld',this);
        $sub_itmes.fadeIn('slow');
    },
    mouseleave: function() {
        $sub_itmes = $('.chilld',this);
        $sub_itmes.fadeOut('slow');
    }
});

fiddle

On a side note take a look at hoverIntent plugin, It will ignore a quick mouse over but activate only when it seems the user wanted to do so.