所以我根据他们的班级选择元素,例如:
$.each($('#gender_chart .nv-slice'), function(i, value) { });
$('#gender_chart .nv-slice').each(function() { });
无论我使用哪个,如果我打印出$(this / value)的hasClass(),我就会得到假。例如:
console.log($(this).hasClass('nv-slice'))
console.log($(value).hasClass('nv-slice'))
正如您所看到的,我使用类' nv-slice'循环遍历所有元素,但随后在任何这些元素上调用hasClass('nv-slice')
将返回false。
非常感谢任何帮助。
修改:nv-slice
类的所有元素都是<g>
标记
编辑2:我问的原因是因为我试图拨打$(this).trigger('hover')
并且我无法解决,因为某些原因它无法访问正确的元件
答案 0 :(得分:3)
直到v1.12 / v2.2,jQuery在SVG元素上不支持addClass
,hasClass
等。在v1.12和v2.2中,他们添加了对XML元素(包括SVG)的支持。
如果使用旧版本,您可以使用classList
:
console.log(this.classList.contains("nv-slice"));
...或者当然,回归旧式的属性检查:
console.log(/\bnv-slice\b/.test(this.getAttribute("class")));
...你可能不得不这样做,因为IE support for classList
是最近的(dfsq说即使IE10在SVG节点上也没有,只有HTML节点)。
$('#gender_chart .nv-slice').each(function() {
snippet.log("hasClass says " + $(this).hasClass("nv-slice"));
snippet.log("classList.contains says " + this.classList.contains("nv-slice"));
snippet.log("class attr check says " + /\bnv-slice\b/.test(this.getAttribute("class")));
});
&#13;
<div id="gender_chart">
<svg width="50" height="50" viewBox="0 0 95 50"
xmlns="http://www.w3.org/2000/svg">
<g class="nv-slice" stroke="green" fill="white" stroke-width="5">
<circle cx="25" cy="25" r="10" />
</g>
</svg>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
&#13;