Question

如何使用 jquery 隐藏父元素？

2009-08-21

31945

javascript jquery html

假设以下 HTML：

<li class="fooli">
   <a class="foo" href="javascript:foo(this);">anchor</a>
</li>
<li class="fooli">
   <a class="foo" href="javascript:foo(this);">anchor</a>
</li>

和以下 Javascript（使用 jquery 1.3.2）：

function foo(anchor) {
  alert($(anchor).attr('href'));
}

我的目标是能够隐藏单击的 li，但我无法为它们分配唯一的 ID。因此，我想通过类似 $(anchor).parent().hide() 的方法按位置执行此操作（即识别单击的特定锚点）。

但是，上面的警报返回“未定义”，因此我甚至无法确定我是否拥有正确的 jquery 对象。

如何确定 $(anchor) 是什么对象？特别是，如何查看它具有哪些属性、它具有哪些类、它是什么 HTML 元素等？

Answer 1

您不能这样做吗：

$(function() {
  $("a.foo").click(function() {
    $(this).parent().hide();
    return false;
  });
});

与：

<li class="fooli"><a class="foo" href="#">anchor</a></li>
<li class="fooli"><a class="foo" href="#">anchor</a></li>

Answer 2

jQuery 中的

$(...) 从来不是一个 HTML 元素；它总是一个 HTML 元素列表。

您可以使用 .get() 转换为常规 Javascript 列表，或者更好的方法是使用 .each() :

$(anchor).each(function() { alert(this) });

这将为您提供类似 [object HTMLAElement] 的内容。您必须使用 for/in 来完全检查它，但 .tagName 和 .innerHTML 可能足以确定您的位置。

我还喜欢使用 $(...).css('outline', '1px solid lime') 来查找元素。这使得它们很难被遗漏，并且很容易用 Firebug 精确定位。

附录：我绝对同意上述关于将 Javascript 与 HTML 分开的回答。不要内联 JS。