javascript - 查找列表项的子元素

Question

这是麻烦的函数。我无法正确定位嵌套的 UL 元素:

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");
  });
}

点击函数如下:

$("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();
});

我的 HTML 显示如下:

<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

首先，$.post 的内部成功处理程序 this do 指向它自己的执行上下文。接下来是您必须将 dom 元素传递给 showContentAgency 方法，您可以使用该方法找到所需的 ul 元素。试试这个。

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();
});