Question

所以我根据他们的班级选择元素，例如：

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

正如您所看到的，我使用类＆＃39; nv-slice＆＃39;循环遍历所有元素，但随后在任何这些元素上调用hasClass('nv-slice')将返回false。

非常感谢任何帮助。

修改：nv-slice类的所有元素都是<g>标记

编辑2：我问的原因是因为我试图拨打$(this).trigger('hover')并且我无法解决，因为某些原因它无法访问正确的元件

Answer 1

直到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节点）。

＆＃13;

$('#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;

尽管基于类选择，hasClass（）返回false

1 个答案: