jQuery 属性选择器：如何使用自定义命名空间查询属性答案

【问题标题】：jQuery attribute selectors: How to query for an attribute with a custom namespacejQuery 属性选择器：如何使用自定义命名空间查询属性
【发布时间】：2010-09-10 15:05:50
【问题描述】：

假设我有一个简单的 XHTML 文档，它为属性使用自定义命名空间：

<html xmlns="..." xmlns:custom="http://www.example.com/ns">
    ...
    <div class="foo" custom:attr="bla"/>
    ...
</html>

如何使用 jQuery 匹配具有特定自定义属性的每个元素？使用

$("div[custom:attr]")

不起作用。（目前仅在 Firefox 上试用过。）

【问题讨论】：

更新，Suphi 的答案是一个更简单的语法和工作。不过我还没有进行任何性能比较。
命名空间前缀声明应该是 xmlns:custom= 吗？

标签： javascript jquery

【解决方案1】：

jQuery不直接支持自定义命名空间，但是你可以通过过滤功能找到你要找的div。

// find all divs that have custom:attr
$('div').filter(function() { return $(this).attr('custom:attr'); }).each(function() {
  // matched a div with custom::attr
  $(this).html('I was found.');
});

【讨论】：

【解决方案2】：

这在某些情况下有效：

$("div[custom\\:attr]")

但是，对于更高级的方法，请参阅this XML Namespace jQuery plug-in

【讨论】：

命名空间插件是一个梦想。
此策略不适用于基于 Webkit 的浏览器，如 Safari 和 Chrome。有什么想法吗？
+1，附带一点说明：jQuery 会破坏 HTML 附加的 XML 块的命名空间定义（实际上是用 SVG 测试的）。它将xmlns:custom="uri" 属性破坏为custom="uri"，可能是因为HTML（通常？）不承认xmlns 属性。将文档作为 XHTML 提供可以解决问题，但可能并非在所有情况下都实用。
根据我的经验，通常是浏览器本身负责处理 HTML（因为它管理的是 DOM，而不是 jQuery）。 IE 对此尤其糟糕（大惊喜）。

【解决方案3】：

按属性匹配的语法是：

$("div[customattr=bla]") 匹配 div customattr="bla"

$("[customattr]") 匹配所有具有"customattr" 属性的标签

'custom:attr' 等命名空间属性不起作用

Here你可以找到一个很好的概述。

【讨论】：

链接的文章没有引用自定义属性。
这不是答案。它基本上只是重申问题并说选择器似乎不适用于命名空间。

【解决方案4】：

你应该使用$('div').attr('custom:attr')。

【讨论】：

我澄清了我的问题：我想匹配每个具有自定义属性的元素，而不是获取属性的值。
@redsquare：这适用于大多数浏览器，但在 Opera 上失败。有什么快速解决办法吗？

【解决方案5】：

这是一个适合我的自定义选择器的实现。

// Custom jQuery selector to select on custom namespaced attributes
$.expr[':'].nsAttr = function(obj, index, meta, stack) {

    // if the parameter isn't a string, the selector is invalid, 
    // so always return false.
    if ( typeof meta[3] != 'string' )
        return false;

    // if the parameter doesn't have an '=' character in it, 
    // assume it is an attribute name with no value, 
    // and match all elements that have only that attribute name.
    if ( meta[3].indexOf('=') == -1 )
    {
        var val = $(obj).attr(meta[3]);
        return (typeof val !== 'undefined' && val !== false);
    }
    // if the parameter does contain an '=' character, 
    // we should only match elements that have an attribute 
    // with a matching name and value.
    else
    {
        // split the parameter into name/value pairs
        var arr = meta[3].split('=', 2);
        var attrName  = arr[0];
        var attrValue = arr[1];

        // if the current object has an attribute matching the specified 
        // name & value, include it in our selection.
        return ( $(obj).attr(attrName) == attrValue );
    }
};

示例用法：

// Show all divs where the custom attribute matches both name and value.
$('div:nsAttr(MyNameSpace:customAttr=someValue)').show();

// Show all divs that have the custom attribute, regardless of its value.
$('div:nsAttr(MyNameSpace:customAttr)').show();

【讨论】：