Question

Here’s the troublesome function. I can not correctly locate the nested UL element:

function showContentAgency(id){
  $.post("assets/includes/contentAgency.php?id=id", {id: id}, function(data){
    $(this).parent().find("ul").html(data).show();
    $(this).addClass("nav-active");
  });
}

Here’s the click function:

$("ul.top-level").on("click", "ul.top-level li.agency a", function (event) {
    var numbs = $(this).attr("href").match(/id=([0-9]+)/)[1];
    $("ul.top-level li a").removeClass("nav-active");
    $(this).addClass("nav-active");
    showContentAgency(numbs);
    event.preventDefault();
});

My HTML appears as so:

<ul class="top-level" style="display: block; ">
    <li class="agency"><a href="contentAgency.php?id=6" class="">Agency Name</a>
    <ul>
        <!--Content in here -->
    </ul>
    </li>
</ul>

Answer 1

First of all inside success handler of $.post this do points to its own execution context. Next is you have to pass the dom element to showContentAgency method using which you can find the required ul element. Try this.

function showContentAgency(id, elem){
   $.post("assets/includes/contentAgency.php?id=id", {id: id}, function(data){
       $(elem).addClass("nav-active").parent().find("ul").html(data).show();
   });
}


$("ul.top-level").on("click", "ul.top-level li.agency a", function (event) {
    var numbs = $(this).attr("href").match(/id=([0-9]+)/)[1];
    $("ul.top-level li a").removeClass("nav-active");
    $(this).addClass("nav-active");
    showContentAgency(numbs, this);
    event.preventDefault();
});