如何使用 jquery 获取 id、class 或 name attr 元素答案

【问题标题】：How can I get id,class or name attr an element with jquery如何使用 jquery 获取 id、class 或 name attr 元素
【发布时间】：2012-11-06 06:19:30
【问题描述】：

我是 jquery 的新手。如何使用 jquery 获取元素的名称、ID 或类名。我正在尝试；

<div class="className" onclick="getname();"></div>
<div id="idName" onclick="getName();"></div>
<div name="attrName" onclick="getName()"></div>

function getName(){
attrName = $(this).attr("name");
alert(attrName);
}

但不起作用

【问题讨论】：

标签： jquery attr html

【解决方案1】：

首先使用 jQuery，您应该附加 click() 处理程序，而不是使用过时的 onclick 属性。然后，您可以按照您在函数中的方式使用 this 关键字。

试试这个：

<div class="className"></div>
<div id="idName"></div>
<div name="attrName"></div>

$(function() {
    $("div").click(function() {
        var name = this.name;
        var cls = this.className;
        var id= this.id;

        alert("Name: " + name + " / Class: " + cls + " / Id: " + id);
    });
});

Example fiddle

您选择的属性都可以通过POJS获得，您也可以将this转换为jQuery对象来获取其他属性，例如：

var title = $(this).attr('title');
var myattribute = $(this).data('myattribute'); // using HTML5: <div data-myattribute="foo"></div>

【讨论】：

你为什么要重新声明var 三次（比必要的两倍），使用两次name 而没有使用this.className？
@DavidThomas 抱歉，正忙着制作小提琴来演示。错误已修复。我也用attr()做示范，会做笔记的。
this.name 未定义，至少在 Chrome 上是这样； this.getAttribute('name') 给出预期值。

【解决方案2】：

您需要传递对要获取其名称属性的元素的引用。试试这个：

jQuery

function getName(me) {
    attrName = $(me).attr("name");
    alert(attrName);
}

HTML

<div class="className" onclick="getname(this);">a</div>
<div id="idName" onclick="getName(this);">b</div>
<div name="attrName" onclick="getName(this)">c</div>

jsFiddle example

现在您应该得到最后一个元素的名称，因为这是唯一有名称的元素。其他人将返回undefined。

【讨论】：

【解决方案3】：

试试这个：

JavaScript

$(function () {
    $('div').click(function () {
        var elem = $(this);
        alert('Class: ' + elem.attr('class'));
        alert('Id: ' + elem.attr('id'));
        alert('Name: ' + elem.attr('name'));    
    });
});

HTML

<div class="className" onclick="getname();"></div>
<div id="idName" onclick="getName();"></div>
<div name="attrName" onclick="getName()"></div>

CSS

div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

JSfiddle：http://jsfiddle.net/54ynV/

在上面的脚本中，我们将附加到页面$('div').click... 上每个 div 的点击事件。在回调中，我们得到它的属性。

【讨论】：