JQuery selector using value, but unknown attribute

Question

How can I use JQuery to search for elements, that have a specific attribute value, regardless of the attribute tag?

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?

Answer 1

You can use a custom pseudo-selector to filter over the attributes.

Following is a jQuery way.

$.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();

Fiddle Demo

The $.expr[":"].attrFilter, is an extension mechanism for custom selectors. You can also pass a parameter.

---

Syntax :

$.expr[':'].selector = function(elem, index, match) { 

}

• elem is the current DOM element
• index is the index of elem

• match is an array that contains all information about the custom selector,where the parameter passed lies at 3rd index. (Reference 1,Reference 2)

  • match[0] – contains the full pseudo-class selector call. In this example :attrFilter("value")
  • match[1] – contains the selector name only. In this example attrFilter
  • match[2] – denotes which, if any, type of quotes are used in the parameter - expression. i.e. single (‘) or double (“). In this example it will be empty.
  • match[3] – gives us the parameters, i.e. what is contained in the brackets. In this example `value

Answer 2

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