Question

How to select parent object of a hyperlink whose href match the requested page/file name using jQuery?

I have following code

<div>
<div class="menu-head">
<a href="empdet.aspx">employees</a>
<a href="custdet.aspx">customers</a>
</div>
<div class="menu-head">
<a href="depdet.aspx">departments</a>
</div>
<div>

I want a Jquery to change the color of the parent div corresponding a hyperlink. If the user is browsing custdet.aspx the respective parent div background should be changed to red.

Edit: I have a method to retrieve the file name. I just need the right selector to select the parent.

Answer 1

I tried to post this over 2 hours ago and my internet died. It just came back on so I’ll add it to the list.

You can get the current path using document.location.pathname, to get the filename from the end split() on “/” and pop() the resulting array:

// get the current filename
var file = document.location.pathname.split("/").pop();

// get the parent of a matching hyperlink
var lPar = $('#menu-head > a[href="'+file+'"]').parent();

Side note: in your example you have two div elements with the same id (menu-head). Duplicate IDs are invalid on the same page and you will run into issues if you do not make them unique.