Question

我的HTML看起来像：

<div class="group_box">
  <div>
     <div>
       ... <!-- I don't know haw many div's here -- >
       <a class="mark_as_read" ...>
     </div>
  </div>
<div>

....

<div class="group_box">
  <div>
     <div>
       ... <!-- I don't know haw many div's here -- >
       <a class="mark_as_read" ...>
     </div>
  </div>
<div>

当用户点击“mark_as_read”时，我想隐藏父“group_box”。

这样的事情：

<script type="text/javascript">
  $().ready(function() {
    $('.mark_as_read_link').bind('click', function() {
      alert($(self));
      $(self).parent('.group_box').hide();
      return false;
    });
 });
</script>

但它不起作用。我不知道在这种情况下$（this）是什么....

Answer 1

您可以使用.closest()方法代替.parent()，该方法将遍历DOM，直到找到与选择器匹配的元素。

<script type="text/javascript">
  $().ready(function() {
    $('.mark_as_read_link').on('click', function() {
      $(this).closest('.group_box').hide();
      return false;
    });
 });
</script>

在示例中，我使用.on()而不是.bind()。从jQuery 1.7开始，.bind()已被弃用，以支持.on()附加事件侦听器。

<强>更新

正如Joonas在评论中指出的那样，可以使用.parents()方法，而不是上面建议的.closest()。区别在于.parents()将继续遍历DOM，即使它遇到与选择器匹配的元素，而.closest()将在找到匹配后立即停止遍历。在这种情况下，我认为.closest()更适合此目的，但如果您考虑使用.parents()代替，则the documentation中列出了差异：

<强> .closest（）

从当前元素开始
向上移动DOM树，直到找到所提供选择器的匹配项
返回的jQuery对象包含原始集合

<强>。家长（）

从父元素开始
将DOM树移动到文档的根元素，将每个祖先元素添加到临时集合中;然后，如果提供了一个选择器，则根据选择器过滤该集合
返回的jQuery对象包含原始集合

Answer 2

您必须使用jQuery函数closest()。它返回最接近的父级：

<script type="text/javascript">
  $(document).ready(function() {
    $('.mark_as_read_link').click(function(){
      $(this).closest('.group_box').hide();
      return false;
    });
 });
</script>

ps $（自我）毫无意义。将$（this）用于当前元素

Answer 3

onYou like this like

<script type="text/javascript">
   $().ready(function() {
     $("body").on('click','.mark_as_read', function() {
         $(this).closest('.group_box').hide();
        return false;
      });
   });

而是使用On，不推荐使用bind

按类名隐藏父div

3 个答案: