[英]JQuery selector using value, but unknown attribute
How can I use JQuery to search for elements, that have a specific attribute value, regardless of the attribute tag?如何使用 JQuery 搜索具有特定属性值的元素,而不管属性标签如何?
Like:喜欢:
$("[*='myvalue']")
should find应该找到
<a href="target.html" target="myvalue">...
<tr change="myvalue">...
The first one, because of the "target" attribute, the second one for the "change" attribute.第一个,因为“目标”属性,第二个是“更改”属性。
Is there a better solution than just iterate over all attributes?有没有比迭代所有属性更好的解决方案?
You can use a custom pseudo-selector to filter over the attributes.您可以使用自定义伪选择器来过滤属性。
Following is a jQuery way.以下是一种jQuery方式。
$.expr[":"].attrFilter = function(elem, index, val){
var len = $(elem.attributes).filter(function () {
return this.value === val[3];
}).length;
if (len > 0) {
return elem;
}
};
$('body *:attrFilter("value")').hide();
The $.expr[":"].attrFilter
, is an extension mechanism for custom selectors. $.expr[":"].attrFilter
是自定义选择器的扩展机制。 You can also pass a parameter.您还可以传递参数。
Syntax :语法:
$.expr[':'].selector = function(elem, index, match) {
}
elem
is the current DOM element elem
是当前的 DOM 元素index
is the index of elem index
是 elem 的索引match
is an array that contains all information about the custom selector,where the parameter passed lies at 3rd index. match
是一个包含有关自定义选择器的所有信息的数组,其中传递的参数位于第 3 个索引处。 ( Reference 1 , Reference 2 ) ( 参考文献1 , 参考文献2 )
match[0]
– contains the full pseudo-class selector call. match[0]
– 包含完整的伪类选择器调用。 In this example : attrFilter("value")
attrFilter("value")
match[1]
– contains the selector name only. match[1]
– 仅包含选择器名称。 In this example attrFilter
attrFilter
match[2]
– denotes which, if any, type of quotes are used in the parameter - expression. match[2]
– 表示参数表达式中使用的引号类型(如果有)。 ie single (') or double (“).match[3]
– gives us the parameters, ie what is contained in the brackets. match[3]
– 为我们提供参数,即括号中包含的内容。 In this example `valueYes the same approach will be followed here also.是的,这里也将采用相同的方法。 Reference
参考
var elements = document.getElementsByTagName("*");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var attr = element.attributes;
for (var j = 0; j < attr.length; j++) {
if (attr[j].nodeValue == 'myvalue') {
element.style.backgroundColor = 'red';
}
}
}
Here's a function extension that you could use to find the elements you want.这是一个可用于查找所需元素的函数扩展。
jQuery(function($) { $.fn.filter_by_attr_value = function(value) { return this.filter(function() { // [].some() would be better here return $.grep(this.attributes, function(attr) { return attr.nodeValue == value; }).length; }); }; $('*').filter_by_attr_value('myvalue').css('background', 'lightgreen'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="target.html" target="myvalue">FOO</a> <table> <tr change="myvalue"> <td>BAR</td> </tr> </table> <div>not me</div>
This can be done without JQuery in plain JavaScript or VanillaJS as other moniker is called.这可以在没有 JQuery 的纯 JavaScript 或 VanillaJS 中完成,因为其他名字被调用。 I put include because most of the time we search substring:
我把 include 放在因为大多数时候我们搜索子字符串:
var all = document.getElementsByTagName("*");
for (el of all) for (attr of el.attributes) if (attr.nodeValue.includes("myvalue")) console.log(attr.ownerElement)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.