jquery - 在jquery中隐藏无序列表项标签点击

Question

我有一个如图所示呈现的无序列表；

<div id="day4">
    <span id="lblDay4" class="calendartilelabel">10/11/2013</span>
    <hr class="calendartileline" />
    <ul id="day4List" class="calendartile">
    <li>Nov Sugar Options Expiration</li>
    <li>Nov Coffee Options Expiration</li>
    <li class='next'><a href='#'>Next--></a></li>
    </ul>
</div>

我试图隐藏当前显示的 ul 但无法检索 ul 的 id 这样做。我正在使用该功能

 $("ul.calendartile > li > a").on("click", function (event) {
       var clickedUl = event.target.id;                    
       $(clickedUl).hide();                 
  });

那里的问题是它隐藏了所有带有类calendartile的无序列表，因此我需要检索其标签被点击的UL标签的ID。我尝试使用以下我认为有意义的方法

 $("ul.calendartile > li > a").on("click", function (event) {
       var clickedUl = event.parent().parent().target.id;   
       alert(clickedUl);                 
       $(clickedUl).hide();                 
  });

但是警报是空白的，即没有找到 id。如何找到触发标签点击的列表项的 ul 标签的 id？

Answer 1

试试这个方法：

$("ul.calendartile > li > a").on("click", function (event) {
       event.preventDefault();
       var clickedUl = $(this).closest('ul').prop('id');   
       $('#' + clickedUl).hide();                 
 });

event没有父母（）。event 不是元素， parent() 也是 jquery object 上的函数，您始终可以使用thiscontext 获取单击的元素并使用导航到其父级closest()。

小提琴

如果您收到警报，我会感到惊讶。因为您必须在控制台中看到错误。