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

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

$("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元素，而是从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()

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 
    })

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

jQuery的：

HTML：

6 个答案: