Is it possible to select element by attribute value only?

Question

I need to find all elements in a page by attribute value only (ignoring the key) using jquery.

Is there a way to do this easily?

Currently, I am just iterating on all elements in the page, on every property etc..

Answer 1

You can use $.expr, Element.attributes, Array.prototype.some()

$.expr[":"].attrValue = function(el, idx, selector) {
  return [].some.call(el.attributes, function(attr) {
    return attr.value === selector[selector.length - 1]
  })
};
// filter element having attribute with `value` set to `"abc"`
$(":attrValue(abc)").css("color", "blue");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div title="abc">abc</div>
<div title="def">def</div>
<div title="ghi">ghi</div>
<div title="jkl">jkl</div>

Answer 2

You could define new function take as parameter the value you want to filter with (e.g get_elements_by_value(filter)), then inside this function parse all the elements of the page using $('*').each(), after that parse the attributes of every element el of those elements using attribute attributes like below :

$.each(el.attributes, function(){ })

Then inside the each loop you could make your condition and push the matched values with the passed filter inside matched[] that should be returned.

Check working example below, hope this helps.

function get_elements_by_value(filter){
  var matched=[];

  $('*').each(function(index,el) {
    $.each(el.attributes, function() {
      if( this.value===filter )
        matched.push(el);
    })
  })
  return $(matched);
}

get_elements_by_value('my_value').css('background-color','green');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="my_value">AA</div>
<div title="def">BB</div>
<input type='text' name='my_value' value='CC'/>
<p class='my_value'>DD</p>
<span title="test">EE</span>

Answer 3

Use brackets []

var ElementsWithAttributeKeyTest = $('[attributeKey="Test"]');

Or pass an object with the attribute name and value as parameter to this function:

var getElemsByAttribute = function(obj) {
  if (obj) {
    if (obj.attributeKey && obj.attributeValue) {
      return $('[' + obj.attributeKey + '="' + obj.attributeValue + '"]');
    }
  }
}

var attrObj = {
  attributeKey: 'data-color',
  attributeValue: 'red'
}
getElemsByAttribute(attrObj).css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

<span data-color="red">Red</span>
<span data-color="red">Red</span>
<span data-color="green">Green</span>
<span data-color="blue">Blue</span>
<span data-color="red">Red</span>
<span data-color="green">Green</span>

Answer 4

If you want to search all attributes values you can use this small plugin:

$.fn.search_by_attr_value = function(regex) {
    return this.filter(function() {
        var found = false;
        $.each(this.attributes, function() {
            if (this.specified && this.value.match(regex)) {
                found = true;
                return false;
            }
       });
       return found;  
    });
};

and you can use it like this:

$('*').search_by_attr_value(/^some value$/);

Based on this answer