jQuery 如何获取被点击元素的类?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/964119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 10:15:25  来源:igfitidea点击:

How to get the class of the clicked element?

jquery

提问by Fenton

I can't figure it out how to get the classvalue of the clicked element.

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

When I use the code bellow, I get "node-205"every time.

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

jQuery:

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:

HTML:

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

回答by Fenton

Here's a quick jQuery example that adds a click event to each "li" tag, and then retrieves the class attribute for the clicked element. Hope it helps.

这是一个快速的 jQuery 示例,它向每个“li”标签添加一个点击事件,然后检索被点击元素的类属性。希望能帮助到你。

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

Equally, you don't have to wrap the object in jQuery:

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

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

And in newer browsers you can get the full list of class names:

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

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

You can emulate classListin older browsers using myClass.split(/\s+/);

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

回答by Harpal

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

回答by War10ck

I saw this question so I thought I might expand on it a little more. This is an expansion of the idea that @SteveFenton had. Instead of binding a clickevent to each lielement, it would be more efficient to delegate the events from the uldown.

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

For jQuery 1.7 and higher

对于 jQuery 1.7 及更高版本

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

Documentation:.on()

文档:.on()

For jQuery 1.4.2 - 1.7

对于 jQuery 1.4.2 - 1.7

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

Documentation:.delegate()

文档:.delegate()

As a last resort for jQuery 1.3 - 1.4

作为 jQuery 1.3 - 1.4 的最后手段

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

or

或者

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

Documentation:.live()

文档:.live()

回答by jeroen.verhoest

This should do the trick:

这应该可以解决问题:

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

For more info about the ui.tab see http://jqueryui.com/demos/tabs/#Events

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

回答by Cybernetic

All the solutions provided force you to know the element you will click beforehand. If you want to get the class from any element clickedyou can use:

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

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

回答by Pushkraj

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