Question

Need some help with this code I got off the net

$(document).ready(function(){
jQuery(".linkbar li").each(function(){
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {
$(this).addClass('current');
}
});
});

if I do
document.write(href);

I get “undefined”

If I place var href = jQuery(this).find('a').attr('href'); before .each() function it changes all my links to the current class

below is my HTML and CSS
I need to change the css link for the current page, I’m not too good with Jquery/JS. Please explain to me what the problem is and how to solve it.

<div class ="linkbar">

<a href = "/HTS/about-us.php"><li> ABOUT US </li> </a>
<a href = "service.php"><li> SERVICES </li> </a>
<a href = "download.php"><li> DOWNLOAD </li> </a>
</div>

CSS

.linkbar li{
text-decoration:none;
float:left;
list-style-type: none;
font-size:11px;
width:auto;
padding:9px 18px 9px 18px;
}

.current{
background-color:#fecd0f;
vertical-align:center;
color:#fff;
}

Answer 1

well, buddy you have .find() which finds inside the element and you anchor tag as parent of li tag so instead of that use this:

var href = $(this).parent('a').attr('href');

if it was this you have this:

<li><a href = "/HTS/about-us.php"> ABOUT US  </a></li>
<li><a href = "service.php"> SERVICES </a></li>
<li><a href = "download.php"> DOWNLOAD  </a></li>

still never use find() but use this :

var href = $(this).children('a').attr('href');