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

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

当您使用类添加null check时，您可以看到，它返回每个元素的值。即。

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

以下是demo.

Answer 3

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

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

演示：Fiddle

Answer 4

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

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

Answer 5

你应该阻止事件冒泡到外部元素 -

你可以做这样的事情

$('*').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/

jQuery - attr（'class'）获取父类

5 个答案: