xlink 的 jQuery 选择器

Question

$('a[xlink\\:href=#coastline]').attr('class','grey');
$('a[xlink\\:href=#onshore]').attr('class','blue-light');

这就是我目前必须选择具有 #coaSTLine xlink 的每个元素并将其变为灰色并将 #onshore 变为 blue-light

我怎样才能改变上面的选择任何 a[xlink\\:href] 并给它一个类？

我试过 $('a[xlink:href]').attr('class', 'yellow'); 但这并没有给他们一个类 yellow

Answer 1

xlink 可以在 xml 标记中找到，并且很难选择，因为它们位于另一个命名空间中。

可以尝试遍历所有元素，修改DOM元素className

var $elements = $('a[xlink\\:href]');
$elements.each(function(index, element) {
    element.className = 'my-new-class';
});

更新:当前的选择器应该返回 null，因为这是命名空间的问题。我们可以使用特殊的选择器a[*|xlink] Stack Overflow post reference 修复这个命名空间。

我们知道它是 SVG，所以要更改 SVG 对象类，我们必须对它们使用 attr 函数。如果你只想选择你的 SVG 元素中的所有链接，我会得到这样的东西:

var $svg = $('svg');
var $elements = $('a[*|xlink]', $svg);  // Select all a xlink attributes inside svg object


$elements.each(function(index, element) {
    $(element).attr('class', 'my-new-class');  // force class attribute
});

JSFiddle:http://jsfiddle.net/nbfdydzd/