Xlink的jQuery选择器

本文介绍了Xlink的jQuery选择器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这是我目前必须选择具有#coastline的xlink的每个项目，并将其变为灰色，然后将#onshore转换为blue-light

This is what I currently have to select each item that has the xlink of #coastline and turn it grey and turn #onshore to blue-light

如何更改上面的内容以选择任何a[xlink\\:href]并给它上课?

How would I be able to change the above to select any a[xlink\\:href] and give it a class?

我已经尝试过$('a[xlink:href]').attr('class', 'yellow');，但这并没有给他们提供yellow

I have tried $('a[xlink:href]').attr('class', 'yellow'); but this doesn't give them a class of yellow

推荐答案

xlink可以在xml标记中找到，并且很难选择，就像在另一个命名空间中一样.

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

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

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';
});

更新:当前选择器应返回null，因为这是名称空间的问题.我们可以使用特殊选择器a[*|xlink]

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

我们知道它是SVG，因此要更改SVG对象类，我们必须在它们上使用attr函数.如果您只想选择SVG元素内的所有链接，那么我会得到这样的东西:

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/

这篇关于Xlink的jQuery选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！