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

Question

我无法弄清楚如何获取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>

Answer 1

这是一个快速的jQuery示例,它为每个"li"标记添加一个click事件,然后检索所单击元素的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+/);

Answer 2

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

Answer 3

我看到了这个问题,所以我想我可能会再扩展一下.这是@SteveFenton的想法的扩展.不是将click事件绑定到每个li元素,而是从uldown向下委托事件会更有效.

对于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()

Answer 4

这应该做的伎俩:

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

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

Answer 5

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

Answer 6

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

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