对于SVG元素，jQuery .hasClass（）方法失败

我有一组类似于node和link的SVG元素。我的程序应该在悬停在任何SVG元素上时检测元素是否有node类或link类。然而，出于某种原因，该.hasClass()似乎不工作：对于SVG元素，jQuery .hasClass（）方法失败

$(".node").hover(function(evt){ 
    console.log($(this).attr("class")); //returns "node" 
    console.log($(this).hasClass('node')); //returns false 
}, function(){console.log("Done");});

所以我在徘徊元素具有类node和jQuery检测过，如图console.log($(this).attr("class"));，但由于某些原因，实际.hasClass()失败。为什么是这样？是否因为SVG而失败？

来源

2013-07-24 Shrey Gupta

只是一个侧面说明，你就是缺少'）;'到底:)以及，似乎为我工作（http://jsfiddle.net/hungerpain/V4BNT /） – krishgopinath

有趣...尝试设置一个变量等于'$（this）.attr（“class”）'然后使用'hasClass'与该变量。仍然是假的？ – tymeJV

SVG中的元素并不是真正的HTML，因此这些元素缺少属性，这就是为什么获取该属性的原因，但使用hasClass（可能检查className属性）不起作用。 – adeneo

HTML元素的类属性在SVG中的含义不同。

$("<b></b>").addClass($(this).attr("class")).hasClass("node")

或者

/(^|\s)node(\s|$)/.test($(this).attr("class"))

的SVG元素。

编辑 .hasClass似乎只是正常工作（至少在IE9和FF）http://jsfiddle.net/X6BPX/1/

所以，问题可能出在以下任意组合：使用过时的语法错误，使用过时的浏览器，版本的jQuery。

来源

2013-07-24 17:41:37

SVG中'class'是什么意思？ – Bergi

@Bergi - 它只是一个常规的属性，而不是一个特殊的样式属性，就像它在HTML元素中使用浏览器特定的钩子，比如className和class。 –

http://www.w3.org/TR/SVG/styling.html#ClassAttribute – Bergi

-4

作品。但一定要关闭该功能

$(".node").hover(function(evt){ 
    console.log($(this).attr("class")); //returns "node" 
    console.log($(this).hasClass('node')); //returns false 
}, function(){console.log("Done");});

http://jsfiddle.net/X6BPX/

来源

2013-07-24 17:46:44

谢谢瑞克，但我在评论中澄清，缺少的括号是一个错字。我在电脑上的功能已关闭。 –

即时。没读过。但它的工作原理:) –

@Rick：当hasClass（'node'）'返回false时，这是如何工作的？！ – Tom

由于BERGI在评论中指出，jQuery的默默失败对帐户的className SVG元素返回一个SVGAnimatedString对象，而不是一个正常的DOMString。

请参阅this JSFiddle进行比较。

我很想提交关于此一拉请求，但做了一个快速搜索项目，显然对SVG的问题了jQuery项目的立场是wontfix：https://github.com/jquery/jquery/pull/1511

如果您使用D3，你可以使用d3.select(this).classed('node') 。请注意，D3正确返回HTML元素和SVG元素。

来源

2014-07-15 14:45:27

这不是有史以来最快的选择，但它是一种可能的解决方案。您可以使用jQuery的hasClass而不是使用jQuery的class属性作为字符串，并使用indexOf来搜索它。这可能会失败，所以我不会推荐这个，除非是超级简单的项目。

工作例如：

var s = $(this).attr('class'); 
if(s.indexOf('node')!==-1){ 
    // do something 
}

记住：indexOf回报-1时，它无法找到任何东西，不0。子字符串在索引0处开始时返回0。

来源

2015-09-24 21:01:15

这是在jQuery 3.x.x版本之前针对addClass，removeClass，hasClass jquery方法的一种破解。

$.fn.extend({ 
    addSVGClass: function (cls) { 
     return this.each(function() { 
      var classList = $(this).attr('class'); 
      if (classList) { 
       var classListArr = classList.split(" "); 
       if (classListArr.indexOf(cls) === -1) { 
        classListArr.push(cls); 
        classList = classListArr.join(" ").trim(); 
        $(this).attr('class', classList); 
       } 
      } else { 
       $(this).attr('class', cls); 
      } 
     }); 
    }, 
    removeSVGClass: function (cls) { 
     return this.each(function() { 
      var classList = $(this).attr('class'); 
      if (classList) { 
       var classListArr = classList.split(" "); 
       if (classListArr.indexOf(cls) !== -1) { 
        delete classListArr[classListArr.indexOf(cls)]; 
        classList = classListArr.join(" ").trim(); 
        $(this).attr('class', classList); 
       } 
      } 

     }); 
    }, 
    hasSVGClass: function (cls) { 
     var el = this[0]; 
     var classList = $(el).attr('class'); 
     if (classList) { 
      var classListArr = classList.split(" "); 
      if (classListArr.indexOf(cls) !== -1) { 
       return true; 

      } else { 
       return false; 
      } 
     } 
     return false; 
    } 
});

用法：

$('.svg-element').addSVGClass('selected');

来源

2017-10-13 02:48:50

对于SVG元素，jQuery .hasClass（）方法失败

回答

相关问题