jQuery selector by xlink

Question

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

This is what I currentl

Answer 1

You need to escape special characters

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

Answer 2

[*|href] will match both html href and svg xlink:href, then use :not([href]) to exclude html href.

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

tested in chrome

Answer 3

xlink can be found in xml tags and are tricky to select as they are in another namespace.

You can try to loop through all the elements and modify the DOM element className

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

UPDATE: The current selector should returns null as it's an issue of namespace. We can fix this namespace using the special selector a[*|xlink] Stack Overflow post reference

We know that it's SVG, so to change SVG object classes, we have to use attr function on them. If you just want to select all the links inside your SVG elements I'd got with something like this:

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 4

Maybe this is what you want 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');
});

Answer 5

From your comment i'm thinking that you have smth like

 <a xlink:href="http://www.google.com" target="_blank">
     <text x="0" y="15" fill="red">Link text here</text>
 </a>

So, to change it's color you can try to change it's fill attribute like

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