jquery - 除非使用属性选择器，否则无法按类选择 SVG 元素

Question

由于某种原因，$('#p-foo').siblings('.bar')可以工作，但是$('#g-foo').siblings(' .bar') 没有。谁能告诉我为什么会这样？

<div>
    <p id="p-foo"></p>
    <p class="bar"></p>
</div>

<svg>
    <g id="g-foo"></g>
    <g class="bar"></g>
</svg>

我写了a quick test script演示问题:

var selector  = '.bar',
    attribute = '[class=bar]';

var check = function (foo, d) {
  console.log(d + ' matches ' + foo.siblings(d).length);
};

var p_foo = $('#p-foo');
console.log('DIV');
check(p_foo, selector);
check(p_foo, attribute);

var g_foo = $('#g-foo');
console.log('SVG');
check(g_foo, selector);
check(g_foo, attribute);

输出是:

DIV
.bar matches 1
[class=bar] matches 1
SVG
.bar matches 0
[class=bar] matches 1 

Answer 1

我认为这是一个有趣的问题，所以我做了一些源代码研究。

.siblings()来电 $.filter ，它委托(delegate)给 Sizzle 并最终使用过滤器 here 。

• 如果您使用 [class=bar] 选择器，Sizzle 将使用 ATTR filter ，它只是检索属性并对其值进行相等性检查。这适用于 p 和 g。

• 如果您使用 .bar 选择器，Sizzle 将使用 CLASS filter ，它使用针对 elem.className 的正则表达式。然而，在 SVG 元素中，className 不是一个字符串，而是一个 SVGAnimatedString 的实例(老实说，我从来没有完全理解它，但是它似乎同时具有 animValue 和 baseValue)。正则表达式失败，元素不匹配。

我相信 Sizzle 有额外的处理，如果整个文档是这样的话，这可能会使这项工作成功。SVG 或 XML，但由于此 SVG 嵌入在 HTML 文档中，因此不会生效。