单击锚标记时,最外面的div必须与其子元素一起隐藏

Question

我有一个div标签,其中包含一个div标签,其中包含一个ul标签,然后包含许多li标签.在这些li标签中包含一个锚元素,单击该元素会导致最外面的div隐藏.

例如

<div class="object" id="123">
  <div>
    <ul>
      <li></li>
      <li><a href="#" id="hide">hide outermost div and its child elements</a></li>
    </ul>
  </div>
</div>

<div class="object" id="124">
  <div>
    <ul>
      <li></li>
      <li><a href="#" id="hide">hide outermost div and its child elements</a></li>
    </ul>
  </div>
</div>

在点击锚标签时,最外面的div必须与其子元素一起隐藏.

我想我需要重复使用parentNode ..但是有一种更简单的方法可以直接访问最外层的div,从而获得它的id.帮助将不胜感激.

Answer 1

你的问题还不清楚.这几乎听起来像你正在寻找访问"外格"的通用方法.如果是这种情况,那么你的锚和外部div上都有id是没有意义的.如果只有一个"外部div"和一个锚来隐藏它,你只需要:

$('#hide').click(function(){
    $('#123').hide();
});

如果您想要一种通用的方法,那么您应该向两者添加类:

<div class="outerDiv" id="123">
    <div>
        <ul>
            <li></li>
            <li><a href="#" class="hider" id="hide">hide outermost div and its child elements</a></li>
        </ul>
    </div>
</div>

和:

$('.hider').click(function(){
    $(this).closest('.outerDiv').hide();
});