Question

我有以下HTML代码

<html>
    <head>
         <script src="jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <form class="form" id="form1">
            First name:<br>
            <input type="text" name="firstname">
            <br>
            Last name:<br>
            <input type="text" name="lastname">
        </form>
    </body>
</html>

我希望能够获得被点击元素的父元素的属性列表。例如，如果我点击输入标签，则应返回“class”和“id”，因为它们是“form”标签的属性。

到目前为止，我设法使用以下方法获取被点击元素的属性：

$(event.target.attributes)

但是，当我尝试对父元素执行相同操作时，没有返回任何内容。请问我的代码有问题吗？

$($(event.target).parents().eq(0).attributes)

Answer 1

我使用

解决了这个问题

$(event.target).parents().eq(0).each(function() {
    $.each(this.attributes, function() {
        if(this.specified) {
            alert(this.name, this.value);
        }
    });
});

Answer 2

以下代码将遍历父元素，即表单元素

$.each($(event.target).parent().attributes, function() {
    // this.attributes is not a plain object, but an array
    // of attribute nodes, which contain both the name and value
    if(this.specified) {
      console.log(this.name, this.value);
    }
  });

此外，正如其他成员所建议的那样，您应该使用 $（this）代替 $（event.target）

Answer 3

如果您实际上在事件处理程序中，为什么不使用this直接引用该元素？

$(this).parent().attr("class");

这适用于直接父母，但如果您尝试与直接父母联系，则可以使用$(this).parents：，

$(this).parents("form").attr("class");

编辑：由于您尝试获取属性列表并查看是否存在特定属性，因此可以使用

$(this).parents("form")[0].attributes

这将返回一个NamedNodeMap ..

获取event.target的父母

3 个答案: