JQuery: How to Select a Particular Child Element from Similar Parents

Share

Ok let’s say, you are designing your navigation menu, and you are trying to select a particular child element but because they share the same class or id, unfortunately all elements that are sharing the same id or class seem to be selected.

But rather, you only want only the hovered or clicked element to be the one acted upon regardless of them sharing same id’s or classes.

So, here is a really quick fix:

Add the this selector to your child selector, like so..

[java] $([child-selector], this).event().. [/java]

For example; [java]$(“.sub-menu”, this).hover(…)[/java].

If you don’t get it still, don’t worry. Here is a quick complete example:

I’m designing a navigation menu, and I want to be able to show a particular sub-menu when hovered by the mouse. But these several sub-menus share the same parent class.

Here is a 2-minute quick video tutorial.

However, just in case you don’t like videos,  the HTML code is as follows:-

[html]

<!doctype html>
<html>
<head>
</head>

<body>
<header>
<nav>
<ul class=”main-menu”>
<li class=”current”><a href=”#”>Link 1</a></li>
<li class=”list-item-has-children”><a href=”#”>Link 2</a>
<ul class=”sub-menu”>
<li><a href=”#”>Sub-Link 1</a></li>
<li><a href=”#”>Sub-Link 2</a></li>
<li><a href=”#”>Sub-Link 3</a></li>
</ul>
</li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li class=”list-item-has-children”><a href=”#”>Link 5</a>
<ul class=”sub-menu”>
<li><a href=”#”>Sub-Link 1</a></li>
<li><a href=”#”>Sub-Link 2</a></li>
<li><a href=”#”>Sub-Link 3</a></li>
</ul>
</li>
</ul>
[/html]

Here is the CSS:

[css]

nav{
width: 100%;
text-align: center;
}
.main-menu{
margin: 0;
padding: 0;
border: 0;
background: #333;
}
.main-menu li{
list-style: none;
display: inline;
}
.main-menu li a{
display: inline-block;
padding: 20px;
text-decoration: none;
color: #fff;
}
.main-menu li a:hover,
.main-menu li.current a{
background: #888;
}
.list-item-has-children{
display: inline-block !important;
}
.list-item-has-children:after{
content: ‘\25BE’;
color: #fff;
position: relative;
right: 16px;
}
.sub-menu{
display: none;
position: absolute;
background: #333;
padding: 0;
}
.sub-menu li{
display: block;
border-top: solid 1px #fff;
}

[/css]

And finally the JavaScript:

[java]

jQuery(document).ready(function($){
$(“.list-item-has-children”).hover(function(){
$(“.sub-menu”, this).toggle();
})
})

[/java]


Final Remarks

As easy as that, you should be able to select a particular child element from similar parents. If you having any trouble, feel free to leave your comment below and I will be glad to read and respond.

Related Posts

Get Free WordPress Checklist

Going to launch? Here’s a full WordPress checklist for a successful launch!

Share this post with your friends

Picture of Daniel Emunot

Daniel Emunot

Over 5 years ago, I had no idea on how to use WordPress. Now I professionally build websites for my clients using WordPress. Over the past years I have gained experience and therefore, I spend my spare time writing articles that help beginners skip the Jibber Jabber and quickly start launching websites in the shortest time possible.

Leave a Comment

Your email address will not be published. Required fields are marked *