2

我的 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) 是什么......

4

3 回答 3

8

.parent()您可以使用该方法代替，该.closest()方法将遍历 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()中所述的差异：

.closest()

  • 从当前元素开始
  • 向上移动 DOM 树，直到找到匹配的选择器
  • 返回的 jQuery 对象包含原始集合中每个元素的零个或一个元素

。父母（）

  • 从父元素开始
  • 沿着 DOM 树向上移动到文档的根元素，将每个祖先元素添加到临时集合中；然后，如果提供了选择器，它会根据选择器过滤该集合
  • 返回的 jQuery 对象包含原始集合中每个元素的零个或多个元素
于 2012-11-12T11:25:35.490 回答
4

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

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

ps $(self) 毫无意义。对当前元素使用 $(this)

于 2012-11-12T11:24:14.893 回答
0

onYou 是这样的

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

而是使用 On ,bind 已弃用

于 2012-11-12T11:30:22.040 回答