xlink的jQuery选择器

$('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引用来修复此命名空间

我们知道它是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/

Answer 2

你需要转义特殊字符

 $('a[xlink\\:href]').attr('class', 'yellow'); 

Answer 3

从你的评论我认为你有喜欢

   Link text here  

因此，要更改它的颜色，您可以尝试更改它的fill属性，如

  $('a[xlink\\:href=#coastline]').attr('fill','#ff00ff'); 

Answer 4

[*|href]将匹配html href和svg xlink:href ，然后使用:not([href])排除html href 。

 //document.querySelectorAll('[*|href]:not([href])'); $('[*|href]:not([href])'); 

用铬测试

Answer 5

也许这就是你想要的Demo

 $('a').each(function(i){ if($(this).attr('href') == "#coastline") $(this).addClass('gray'); if($(this).attr('href') == "#onshore") $(this).addClass('green'); if($(this).attr('href') == "") $(this).addClass('yello'); });