jquery - jQuery - attr('class') 获取父类

Question

我正在尝试获取元素的类，但如果当前元素类为空，它会显示其父类。

我只想检查当前元素是否有类，如果不做任何事但不显示父类

$('*').click(function(){
    var class_of_el = $(this).attr('class').replace('test', '').replace('test2', '');
    alert(class_of_el);
});

这是小提琴：http: //jsfiddle.net/howtoplease/cpENU/

Answer 1

问题是事件正在传播。

尝试这个：

$('*').click(function(evt){
    evt.stopPropagation();
    var class_of_el = $(this).attr('class').replace('test', '').replace('test2', '');
    alert(class_of_el);
});

现在，当单击没有类的元素时，什么都不会发生，但是如果单击具有类的元素，它将被alert编辑。 jsFiddle

Answer 2

you should stop event to bubble to outer elements-

you can do something like this

$('*').click(function(event){
    event.stopPropagation();  // This will stop bubbling of event
    var class_of_el = $(this).attr('class').replace('test', '').replace('test2', '');
    alert(class_of_el);
});

http://jsfiddle.net/cpENU/6/

Answer 3

正如 Winterblood 所说，该事件正在传播到父元素，因为您选择了页面上的每个元素。
但是，我还想补充一点，如果您的目标是检查特定类，则可以使用hasClass而不是解析class属性。

$('*').click(function(evt) {
    evt.stopPropagation();
    var isTest = $(this).hasClass('test');
});

Answer 4

click将事件处理程序注册到文档中的所有元素并防止事件从它们传播可能是一个坏主意。

$(document).on('click', '*', function(e){
    if(e.target == this){
        console.log($(this).attr('class'))
    }
})

演示：小提琴

Answer 5

jQuery('*')选择所有元素，这就是为什么你也得到父元素类名的原因。

当您使用类添加空检查时，您可以看到，它为每个元素返回值。IE

$('*').click(function(){
    var class_of_el = $(this).attr('class') != undefined? $(this).attr('class').replace('test', '').replace('test2', '') : 'empty';
    alert(class_of_el);
});

这是演示。