如何获取被点击元素的类？答案

【问题标题】：How to get the class of the clicked element?如何获取被点击元素的类？
【发布时间】：2009-06-08 09:48:21
【问题描述】：

我不知道如何获取被点击元素的class 值。

当我使用下面的代码时，我每次都会得到 "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 插件吗？
如果它是一个被点击的项目，你不应该使用 click() 函数来绑定事件并获取类吗？也许我没有完全理解这个问题......

标签： jquery

【解决方案1】：

这是一个快速的 jQuery 示例，它为每个“li”标签添加一个点击事件，然后检索被点击元素的类属性。希望对您有所帮助。

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

同样，您不必在 jQuery 中包装对象：

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

在较新的浏览器中，您可以获得full list of class names：

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

您可以在旧版浏览器中使用myClass.split(/\s+/);模拟classList

【讨论】：

"class" 不是有效的变量名。
其中一个有趣的情况是 jQuery 是很长的路。 this.className 将为您提供与 $(this).attr("class") 相同的值
如果元素有多个类名怎么办？
不知道为什么，但第二个示例无法为我检索类名。但是，第一个示例效果很好！谢谢！帮了我很多。 :)

【解决方案2】：

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

【讨论】：

【解决方案3】：

我看到了这个问题，所以我想我可以进一步扩展它。这是@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()

【讨论】：

【解决方案4】：

这应该可以解决问题：

...
select: function(event, ui){ 
   ui.tab.attr('class');
} ,
...

有关 ui.tab 的更多信息，请参阅http://jqueryui.com/demos/tabs/#Events

【讨论】：

这是什么意思？你能再解释一下吗？
您需要使用的是 ui.tab 而不是 ui.item。我还以为是 ui.item。

【解决方案5】：

所提供的所有解决方案都迫使您事先知道要点击的元素。如果你想从任何点击的元素中获取类，你可以使用：

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

【讨论】：

需要注意的是，如果获取id不可靠，可以使用$(e.target)代替$('#' + e.target.id)，jQuery仍然会合理处理这种情况。

【解决方案6】：

$("div").click(function() {
  var txtClass = $(this).attr("class");
  console.log("Class Name : "+txtClass);
});

【讨论】：