如何获得clicked元素的类?


228

我无法弄清楚如何获得classclicked元素的值。

当我使用下面的代码时,每次都会得到“ node-205”

jQuery的:

.find('> ul')
.tabs(
{
    selectedClass: 'active',
    select: function (event, ui) {
        //shows only the first element of list
        $(this).children('li').attr('class');
    },
    cookie: { expires: 0 },
    fx: fx
})

HTML:

<ul class="tabs">
  <li class="node-205"></li>
  <li class="node-150"></li>
  <li class="node-160"></li>
</ul>

您的问题还不清楚...您正在使用任何jquery插件吗?
jrharshath,2009年

如果这是一个单击的项目,您是否不应该使用click()函数来绑定事件并获取类?也许我没有完全理解这个问题……
e-satis

Answers:


396

这是一个快速的jQuery示例,该示例将click事件添加到每个“ li”标签,然后检索clicked元素的class属性。希望能帮助到你。

$("li").click(function() {
   var myClass = $(this).attr("class");
   alert(myClass);
});

同样,您不必将对象包装在jQuery中:

$("li").click(function() {
   var myClass = this.className;
   alert(myClass);
});

在较新的浏览器中,您可以获得类名称完整列表

$("li").click(function() {
   var myClasses = this.classList;
   alert(myClasses.length + " " + myClasses[0]);
});

您可以classList使用以下版本在旧版浏览器中进行仿真myClass.split(/\s+/);


1
“类”不是有效的变量名。
Fred Bergman,2009年

1
jQuery任重道远的一种有趣情况。this.className将为您提供与$(this).attr(“ class”)相同的功能
David Gilbertson 2013年

如果元素具有多个类名怎么办?
达曼(Dharman)2013年

1
不知道为什么,但是第二个示例无法为我检索类名。但是,第一个示例效果很好!谢谢!帮助了我很多。:)
Chiefwarpaint

38
$("li").click(function(){
    alert($(this).attr("class"));
});

28

我看到了这个问题,所以我想我可能会再扩大一点。这是@SteveFenton的想法的扩展。与其将click事件绑定到每个li元素,还不如将事件从ul下往下委派。

对于jQuery 1.7及更高版本

$("ul.tabs").on('click', 'li', function(e) {
   alert($(this).attr("class"));
});

说明文件: .on()

对于jQuery 1.4.2-1.7

$("ul.tabs").delegate('li', 'click', function(e) {
   alert($(this).attr("class"));
});

说明文件: .delegate()

作为jQuery 1.3-1.4的不得已而为之

$("ul.tabs").children('li').live('click', function(e) {
   alert($(this).attr("class"));
});

要么

$("ul.tabs > li").live('click', function(e) {
   alert($(this).attr("class"));
});

说明文件: .live()



11

提供的所有解决方案都使您必须事先知道要单击的元素。如果要从单击的任何元素中获取类,可以使用:

$(document).on('click', function(e) {
    clicked_id = e.target.id;
    clicked_class = $('#' + e.target.id).attr('class');
    // do stuff with ids and classes 
    })

2
应该注意的是,如果获取一个id是不可靠的,则可以始终使用$(e.target)代替,$('#' + e.target.id)并且jQuery仍将合理地处理这种情况。
BobChao87

9
$("div").click(function() {
  var txtClass = $(this).attr("class");
  console.log("Class Name : "+txtClass);
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.