how do i add an active class on the parent li when i select an item on it. using javascript

Question

$(function() {
    var pgurl = window.location.href.substr(window.location.href
            .lastIndexOf("/") + 1);
    $("#nav ul li a").each(function() {
        if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
            $(this).addClass("active");
    });

});

here is the js that I am using to put active class on the li. it works fine, but when I am selecting an item (the child) inside my sorta like dropdown list. it will get an active class, but i also want the parent li to get an active class also.

<%@include file="header.jsp"%>
<div id="nav">

    <ul>
        <li class="headerFont"><a href="index.jsp"><b>HOME</b></a></li>
        <li class="headerFont"><a href="link.jsp"><b>HOW TO
                    DONATE</b></a></li>
        <li class="headerFont"><a class="tangina" href="#"><b>DONATE</b></a>
            <ul>
                <li class="headerFont"><a href="link2.jsp"><b>DONATION
                            CENTER <img id="arrow" src="img/arrow.png" />
                    </b></a></li>
                <li class="headerFont"><a href="link3.jsp"><b>HOW ELSE
                            CAN I DONATE? <img id="arrow" src="img/arrow.png" />
                    </b></a></li>
            </ul></li>
        <li class="headerFont"><a href="#"><b>GET DONORS</b></a></li>
        <li class="headerFont"><a href="#"><b>ABOUT BLOOD</b></a>
            <ul>
                <li class="headerFont"><a href="Bfacts.jsp"><b>BLOOD
                            FACTS <img id="arrow" src="img/arrow.png" />
                    </b></a></li>
                <li class="headerFont"><a href="news.jsp"><b>NEWS <img
                            id="arrow" src="img/arrow.png" /></b></a></li>
                <li class="headerFont"><a href="faqs.jsp"><b>FAQS <img
                            id="arrow" src="img/arrow.png" /></b></a></li>
            </ul></li>
        <li class="headerFont"><a href="about.jsp"><b>ABOUT US</b></a></li>

        <li class="headerFont"><a href="login.jsp"><b>LOG IN</b></a>
            <ul>
                <li class="headerFont"><a href="#"><b>REGISTER <img
                            id="arrow" src="img/arrow.png" /></b></a></li>
            </ul></li>

    </ul>

</div>
<div class="triangle"></div>
<div class="triangle2"></div>

Answer 1

Change this line

$(this).addClass("active");

to

$(this).closest('li').addClass('active');

The closest operator tells jQuery to look for the nearest li in the DOM tree. In this case, the nearest parent.

---

A better href string slicing method:

** Here's a fiddle

And here's a better ( read: more accurate ) string slicing function:

/* start of code...*/
var pgurl = sliceString(window.location.href);
/*... rest of code */

function sliceString(s) {
    s = s.split("").reverse().join("");
    if (s.indexOf('/') === 0){
        s = s.substring(1);
    }
    s = s.substring(0, s.indexOf('/'));
    return s.split("").reverse().join("");
}

This will remove any trailing / character, and more accurately select the end-of-string url you're looking for.

---

Edit, the second:

Alright, if you want all parents to be selected then you can use the parents() selector like so:

$(this).parents('li').addClass('active');

Another fiddle example

---

Final edit:

The third solution I provided does select the li that has the a element which was clicked, as well as all its parent li elements. Keep in mind that the top-level li ( headerFont in your provided example) contains all the child li items as well, not just the one that was clicked. If you only want the text selected for DONATE , then add that to your CSS like

nav > ul > li.active b,
nav > ul > li > ul li.active {
  /* ACTIVE STYLES */
}

Those two CSS selectors combined will select the top-level b element in your nav, as well as an non-top-level li element that was clicked.

Answer 2

$(this).parent().addClass('active');