javascript - 可以使用 $(this).parent().parent() 吗？

Question

我有以下 HTML：

<div id="wrapper">
      <div class="p1">
          <a href="#" class="quickFlipCta"><img src="Test Pictures/QuestionMark.gif" /></a>
      </div>

      <div class="p2">
          <a href="#" class="quickFlipCta"><img src="Test Pictures/flower.gif" /></a>
      </div>
</div>

我有一个在用户单击链接时启动的功能：

$('a').click(function(){
   //some code here
});

在函数中，我想访问“包装器”div。这样做的最佳方法是什么？我试过了：

$('a').click(function(){
     $(this).parent().parent().
     //modification to wrapper
    });

但这似乎不起作用。

Answer 1

这是完全有效的，你确定你的点击函数被调用了吗？

最好的方法是使用 id。只需使用$("#wrapper")

您也可以.closest像这样使用，$(this).closest('#wrapper')尽管我会推荐 id 方法而不是 .closest

通过调用 alert 或 console.log 检查你的 click 函数是否被调用

$('a').click(function(){
   alert("Called");
   console.log("Called");
});

Answer 2

虽然您可以使用链式父$(this).parent().parent()级遍历树。

最好使用最接近的方式向上遍历寻找与选择器匹配的最接近的父级，因此对标记的唯一要求是链接在内部div#wrapper。

  $('a').click(function(){
   $(this).closest('div#wrapper')
   //modification to wrapper
  });

Answer 3

根据您的评论，我假设您正在尝试向动画队列添加 CSS 更改。问题是这不能完成，因为css()调用没有动画任何东西，所以两个css()调用都会立即发生。

您仍然可以通过执行以下操作来完成您正在尝试的事情：

$('#wrapper').css('visibility','hidden').delay(500).queue(function(next) {
    $('#wrapper').css('visibility','visible');
    next()
});

见 jQuerydelay()

演示