finding elements containing specific attribute prefix

Question

I don't know if it's possible but I want to find elements according to their attribute name prefix. The attribute goes like this:

<div attName:someOtherValue="12"> </div>

It doesn't have to be necessarily on divs but it does follow the above pattern.

Update

Ok, I forgot 2 important points regarding what I'm trying to accomlish: 1. I can't use jQuery so I'll be using only native JS. 2. 2. The par AFTER the colon changes so When I say I need to find according to an attribute prefix I CAN'T use the part after the colon but only the part before the colon (or including the colon)

Check [this anser](http://stackoverflow.com/a/9496574/3790486) i think it what you need to succeed. — adricadar, Mar 31 '15 at 11:35

Jordi Castilla · Answer 1 · 2015-03-31T11:39:21.627

0

You can specify a common class for all this elements:

<div class="yourClass 12"> </div>

Then you can refer to all like:

var x = document.getElementsByClassName("yourClass");

If you cannot modify the class of elements, with JQuery you can make a pattern:

$("div:regex(class, .yourClass*)")

If you want to "simulate" a pattern, you can select all elements with

var elements = document.getElementsByTagName(*);

Iterating over elements you can get matching ones analizing class or attribute simply with String::indexof()

edited Mar 31 '15 at 11:39

answered Mar 31 '15 at 11:33

Jordi Castilla

26,609
8
70
109

thanks for the comment Jordi. I'll consider using a class however I can't use jQuery (I updated my post) – Ace Apr 01 '15 at 14:12
All my answer is `javascript` only part to select by pattern the className is `JQuery`, so I think if will fit your needs, let me know if you get stucked somewhere... ;) – Jordi Castilla Apr 01 '15 at 14:23

score 0 · Answer 2 · answered Mar 31 '15 at 11:38

you can use the html5 data attribute

<div data-theNameYouWant="someValue">xpto</div>

and with jQuery

$("*").data("theNameYouWant", function(){
    //do your stuff
});
//in case you want a log of that value
console.log($("*").data("theNameYouWant"));
//this will return a log (in browser console), with all the elements values that contains the attribute "data-theNameYouWant"

mohamedrias · Answer 3 · 2015-03-31T13:31:09.567

0

You need to use the following to match all elements with attribute you've mentioned

$('[attName\\:someOtherValue="12"]')

As you've : in the selector, you need to escape it with \\

DEMO

The same in pure JavaScript:

   var elements = document.querySelectorAll('[attName\\:someOtherValue="12"]');
  for(var i =0; i < elements.length; i++) {
      elements[i].classList.add("spaner");
  }

.spaner {
  width: 100px;
  height: 100px;
  background: red;
  margin: 50px;
}

 <div attName:someOtherValue="12"> </div>
 <p attName:someOtherValue="12"> </p>
 <span attName:someOtherValue="12"> hi </span>

edited Mar 31 '15 at 13:31

answered Mar 31 '15 at 11:41

mohamedrias

18,326
2
38
47

thanks for the comment mohamedrias. It would have been optimal but I can only search the first part before the colon sign (on including the colon sign). The part after the colon changes. – Ace Apr 01 '15 at 14:15

bloodyKnuckles · Answer 4 · 2015-03-31T12:23:39.940

A custom function here that gets the element's attributes property and rolls through that looking for the given substring, if found returns an object with the matching attribute name and value.

Usage:

var attribute_object = match_attribute(element, key_substring)

Example:

<div attName:someOtherValue="12"> </div>

<script>

function match_attribute (elem, key) {
    var attributes = elem.attributes
    var obj = {}

    Array.prototype.slice.call(attributes).forEach(function(attribute) {
        if ( -1 !== attribute.name.indexOf(key.toLowerCase()) ) {
            obj = { name: attribute.name, value: attribute.value }
        }
    })
    return obj
}

console.log(match_attribute(document.getElementsByTagName('div')[0], 'attName:'))
// Object {name: "attname:someothervalue", value: "12"}

</script>

JSFiddle

finding elements containing specific attribute prefix

Update

4 Answers4