如何使用jQuery获取元素的id、class或name属性

Question

我是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);
}

但是无法正常工作。

- regxcode

Answer 1

Try this:

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 的点击事件 $('div').click...。在回调函数中，我们获取它的属性。

- Minko Gechev

Answer 2

首先，使用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);
    });
});

示例代码

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

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

- Rory McCrossan

---

你为什么要重新声明var三次（比必要的多两次），使用name两次而不使用this.className？ - David Thomas

@DavidThomas 抱歉，我一直忙着制作一个小示例，已经修复了错误。我还使用了 attr() 来进行演示，并会做个注释。 - Rory McCrossan

在 Chrome 上，this.name 未定义；而 this.getAttribute('name') 则可以得到预期的值。 - Ja͢ck

Answer 3

您需要传递一个引用到要获取名称属性的元素。请尝试以下代码：

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 示例

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

- j08691