blocks|key|215285|text|不知道你要找的是什么，只是花了几分钟写下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|215286|$.fn.filterData+=+function(set)+{
++++var+elems=$([]);
++++this.each(function(i,e)+{
++++++++$.each(+$(e).data(),+function(j,f)+{
++++++++++++if+(j.substring(0,+set.length)+==+set)+{
++++++++++++++++elems+=+elems.add($(e));
++++++++++++}
++++++++});
++++});
++++return+elems;
}|code-block|syntax|javascript|215287|用法如下：|215288|$('div').filterData('api').css('color',+'red');|215289|并将匹配任何具有数据属性(如data-api-*+)的元素，您可以对其进行扩展和修改以包含更多选项等，但目前它只搜索数据属性，并且只匹配“以”开头，但至少它使用起来很简单？|offset|length|style|CODE|215290|215291|entityMap^0|0|0|0|0|E|A|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|X|8|@$M|Y|N|Z|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

Not sure what it is you're looking for, but just spent a few minutes writing this:

<pre><code>$.fn.filterData = function(set) {
 var elems=$([]);
 this.each(function(i,e) {
 $.each( $(e).data(), function(j,f) {
 if (j.substring(0, set.length) == set) {
 elems = elems.add($(e));
 }
 });
 });
 return elems;
}
</code></pre>

To be used like :

<pre><code>$('div').filterData('api').css('color', 'red');
</code></pre>

And will match any elements with a data attribute like <code>data-api-*</code>, and you can extend and modify it to include more options etc. but of right now it only searches for data attributes, and only matches 'starts with', but at least it's simple to use ?

<a href="http://jsfiddle.net/M5hfH/2/">FIDDLE</a>

blocks|key|3073442|text|这将使用.filter()将候选对象限制为具有data-api-*属性的候选对象。可能不是最有效的方法，但如果您可以首先使用相关选择器缩小搜索范围，则可以使用此方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3073443|$("div").filter(function()+{
++++var+attrs+=+this.attributes;
++++for+(var+i+=+0;+i+<+attrs.length;+i%2B%2B)+{
++++++++if+(attrs[i].nodeName.indexOf('data-api-')+===+0)+return+true;+++++++
++++};
++++return+false;
}).css('color',+'red');|code-block|syntax|javascript|3073444|演示：http://jsfiddle.net/r3yPZ/2/|3073445|3073446|这也可以写成选择器。这是我的新手尝试：|3073447|$.expr[':'].hasAttrWithPrefix+=+function(obj,+idx,+meta,+stack)+{
++++for+(var+i+=+0;+i+<+obj.attributes.length;+i%2B%2B)+{
++++++++if+(obj.attributes[i].nodeName.indexOf(meta[3])+===+0)+return+true;
++++};
++++return+false;
};|3073448|用法：|3073449|$('div:hasAttrWithPrefix(data-api-)').css('color',+'red');|3073450|演示：http://jsfiddle.net/SuSpe/3/|3073451|此选择器应适用于jQuery+1.8之前的版本。对于1.8及更高版本，请使用some+changes+may+be+required。下面是一个1.8兼容版本的尝试：|3073452|$.expr[':'].hasAttrWithPrefix+=+$.expr.createPseudo(function(prefix)+{
++++return+function(obj)+{
++++++++for+(var+i+=+0;+i+<+obj.attributes.length;+i%2B%2B)+{
++++++++++++if+(obj.attributes[i].nodeName.indexOf(prefix)+===+0)+return+true;
++++++++};
++++++++return+false;
++++};
});|3073453|演示：http://jsfiddle.net/SuSpe/2/|3073454|3073455|对于更通用的解决方案，下面是一个选择器，它接受正则表达式模式，并选择具有与该模式匹配的属性的元素：|3073456|$.expr[':'].hasAttr+=+$.expr.createPseudo(function(regex)+{
++++var+re+=+new+RegExp(regex);
++++return+function(obj)+{
++++++++var+attrs+=+obj.attributes
++++++++for+(var+i+=+0;+i+<+attrs.length;+i%2B%2B)+{
++++++++++++if+(re.test(attrs[i].nodeName))+return+true;
++++++++};
++++++++return+false;
++++};
});|3073457|对于您的示例，应该可以使用下面这样的代码：|3073458|$('div:hasAttr(%5Edata-api-.%2B$)').css('color',+'red');|3073459|演示：http://jsfiddle.net/Jg5qH/1/|3073460|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/r3yPZ/2/|1|http://jsfiddle.net/SuSpe/3/|2|https://stackoverflow.com/questions/11624345/getting-the-match-object-in-a-custom-filter-selector-in-jquery-1-8/11635193#11635193|3|http://jsfiddle.net/SuSpe/2/|4|http://jsfiddle.net/Jg5qH/1/^0|4|9|N|A|0|0|3|S|0|0|0|0|0|0|0|3|S|1|0|12|S|2|0|0|3|S|3|0|0|0|0|0|0|3|S|4|0^^$0|@$1|2|3|4|5|6|7|1U|8|@$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|20|8|@]|D|@$9|21|A|22|1|23]]|E|$]]|$1|M|3|-4|5|6|7|24|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|25|8|@]|D|@]|E|$]]|$1|P|3|Q|5|H|7|26|8|@]|D|@]|E|$I|J]]|$1|R|3|S|5|6|7|27|8|@]|D|@]|E|$]]|$1|T|3|U|5|H|7|28|8|@]|D|@]|E|$I|J]]|$1|V|3|W|5|6|7|29|8|@]|D|@$9|2A|A|2B|1|2C]]|E|$]]|$1|X|3|Y|5|6|7|2D|8|@]|D|@$9|2E|A|2F|1|2G]]|E|$]]|$1|Z|3|10|5|H|7|2H|8|@]|D|@]|E|$I|J]]|$1|11|3|12|5|6|7|2I|8|@]|D|@$9|2J|A|2K|1|2L]]|E|$]]|$1|13|3|-4|5|6|7|2M|8|@]|D|@]|E|$]]|$1|14|3|15|5|6|7|2N|8|@]|D|@]|E|$]]|$1|16|3|17|5|H|7|2O|8|@]|D|@]|E|$I|J]]|$1|18|3|19|5|6|7|2P|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|H|7|2Q|8|@]|D|@]|E|$I|J]]|$1|1C|3|1D|5|6|7|2R|8|@]|D|@$9|2S|A|2T|1|2U]]|E|$]]|$1|1E|3|-4|5|6|7|2V|8|@]|D|@]|E|$]]]|1F|$1G|$5|1H|1I|1J|E|$1K|1L]]|1M|$5|1H|1I|1J|E|$1K|1N]]|1O|$5|1H|1I|1J|E|$1K|1P]]|1Q|$5|1H|1I|1J|E|$1K|1R]]|1S|$5|1H|1I|1J|E|$1K|1T]]]]

This uses <code>.filter()</code> to limit the candidates to those that has <code>data-api-*</code> attributes. Probably not the most efficient approach, but usable if you can first narrow down the search with a relevant selector.

<pre><code>$("div").filter(function() {
 var attrs = this.attributes;
 for (var i = 0; i &lt; attrs.length; i++) {
 if (attrs[i].nodeName.indexOf('data-api-') === 0) return true; 
 };
 return false;
}).css('color', 'red');
</code></pre>

Demo: <a href="http://jsfiddle.net/r3yPZ/2/" rel="nofollow noreferrer">http://jsfiddle.net/r3yPZ/2/</a>

<hr>

This can also be written as a selector. Here's my novice attempt:

<pre><code>$.expr[':'].hasAttrWithPrefix = function(obj, idx, meta, stack) {
 for (var i = 0; i &lt; obj.attributes.length; i++) {
 if (obj.attributes[i].nodeName.indexOf(meta[3]) === 0) return true;
 };
 return false;
};
</code></pre>

Usage:

<pre><code>$('div:hasAttrWithPrefix(data-api-)').css('color', 'red');
</code></pre>

Demo: <a href="http://jsfiddle.net/SuSpe/3/" rel="nofollow noreferrer">http://jsfiddle.net/SuSpe/3/</a>

This selector should work for pre-1.8 versions of jQuery. For 1.8 and beyond, <a href="https://stackoverflow.com/questions/11624345/getting-the-match-object-in-a-custom-filter-selector-in-jquery-1-8/11635193#11635193">some changes may be required</a>. Here's an attempt at a 1.8-compliant version:

<pre><code>$.expr[':'].hasAttrWithPrefix = $.expr.createPseudo(function(prefix) {
 return function(obj) {
 for (var i = 0; i &lt; obj.attributes.length; i++) {
 if (obj.attributes[i].nodeName.indexOf(prefix) === 0) return true;
 };
 return false;
 };
});
</code></pre>

Demo: <a href="http://jsfiddle.net/SuSpe/2/" rel="nofollow noreferrer">http://jsfiddle.net/SuSpe/2/</a>

<hr>

For a more generic solution, here's a selector that takes a regex pattern and selects elements with attributes that match that pattern:

<pre><code>$.expr[':'].hasAttr = $.expr.createPseudo(function(regex) {
 var re = new RegExp(regex);
 return function(obj) {
 var attrs = obj.attributes
 for (var i = 0; i &lt; attrs.length; i++) {
 if (re.test(attrs[i].nodeName)) return true;
 };
 return false;
 };
});
</code></pre>

For your example, something like this should work:

<pre><code>$('div:hasAttr(^data-api-.+$)').css('color', 'red');
</code></pre>

Demo: <a href="http://jsfiddle.net/Jg5qH/1/" rel="nofollow noreferrer">http://jsfiddle.net/Jg5qH/1/</a>

Is there a way with javascript (particularly jQuery) to find an element based on a partial attribute name?

I am not looking for any of the selectors that find partial attribute values as referenced in these links:

<ul>
<li><a href="http://api.jquery.com/attribute-starts-with-selector/">starts with</a> [name^="value"]</li>
<li><a href="http://api.jquery.com/attribute-contains-prefix-selector/">contains prefix</a> [name|="value"]</li>
<li><a href="http://api.jquery.com/attribute-contains-selector/">contains</a> [name*="value"]</li>
<li><a href="http://api.jquery.com/attribute-contains-word-selector/">contains word</a> [name~="value"]</li>
<li><a href="http://api.jquery.com/attribute-ends-with-selector/">ends with</a> [name$="value"]</li>
<li><a href="http://api.jquery.com/attribute-equals-selector/">equals</a> [name="value"] </li>
<li><a href="http://api.jquery.com/attribute-not-equal-selector/">not equal</a> [name!="value"]</li>
<li><a href="http://api.jquery.com/attribute-starts-with-selector/">starts with</a> [name^="value"]</li>
</ul>

but more something along the lines of

<pre><code>&lt;div data-api-src="some value"&gt;&lt;/div&gt;
&lt;div data-api-myattr="foobar"&gt;&lt;/div&gt;
</code></pre>

and 

<pre><code>$("[^data-api]").doSomething()
</code></pre>

to find any element that has an attribute that starts with "data-api".

Find HTML based on partial attribute

jQuery

javascript (特别是jQuery)有没有办法根据部分属性名来查找元素我不是在寻找任何可以找到这些链接中引用的部分属性值的选择器： name^="value" name|="value" name*="value" name~="value" name$="value" value“ name!="value"...

问基于部分属性查找HTML
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于部分属性查找HTMLEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于部分属性查找HTML
EN