jQuery 属性选择器:如何使用自定义命名空间查询属性
Posted
技术标签:
【中文标题】jQuery 属性选择器:如何使用自定义命名空间查询属性【英文标题】:jQuery attribute selectors: How to query for an attribute with a custom namespace 【发布时间】: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= 吗? 【参考方案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();
【讨论】:
以上是关于jQuery 属性选择器:如何使用自定义命名空间查询属性的主要内容,如果未能解决你的问题,请参考以下文章