Question

Not sure what I’m missing. Here’s my HTML:

    <ul class="top-level">
        <li class="agency"><a href="contentAgency.php?id=6" class="test">Client</a>
        <ul class="agency-sub">
            <li><a href="">Targeting this</a></li>
            <li><a href=""><Multiple entries</a></li>
        </ul>
        </li>
    </ul>

Here is my function:

$("ul.top-level").on("click", "ul.top-level li.agency a.test", function (event) {
    var numbs = $(this).attr("href").match(/id=([0-9]+)/)[1];
    $("#content-display article").hide();
    $(this).children().find("a").addClass("sub-active");
    $(this).parent().siblings().find("ul").hide();
    showContentAgency(numbs, this);
    event.preventDefault();
});

I am trying to add the class sub-active to the nested ul li a tag when clicked.

Answer 1

Instead of $(this).children() use $(this).next() because ul element which you are looking for is a sibling of a.test element which is being clicked.

Try this.

$("ul.top-level").on("click", "li.agency a.test", function (event) {
    var numbs = $(this).attr("href").match(/id=([0-9]+)/)[1];
    $("#content-display article").hide();
    $(this).next().find("a").addClass("sub-active");
    $(this).parent().siblings().find("ul").hide();
    showContentAgency(numbs, this);
    event.preventDefault();
});