Is there a way to search for attributes that start with a specific string in HTML

Question

Is there a way to find all elements with attributes that start on a specific line?

I use the Mootools framework, and this is what I tried:

$$('*[data-media-*]'); 

But it just displays all the elements on the page.

So, is there a way to get all the elements on the page with attributes starting with data-media- ?

Answer 1

you can filter the elements that you already have in order to return them with the corresponding data- * attributes.

 Elements.implement({ filterData: function(substring){ return this.filter(function(element){ var attribs = element.attributes, len, ii = 0; for (len = attribs.length; ii < len; ++ii) { if (attribs[ii].name.indexOf('data-') === 0 && attribs[ii].name.indexOf(substring) !== -1) { return true; } } }); } }); console.log($$("div").filterData('foo')); console.log($$("div").filterData('bar')); console.log($$("div").filterData('oba')); 

in action: http://jsfiddle.net/dimitar/pgZDw/

downside: you need to pass it to a set of elements that make sense, for example. div.foo or #someid *

a more elegant solution would be to add an alias :data() to Slick:

 (function(){ // cache reusable string var data = 'data', hyphen = '-', // set the fallback via XMLSerializer, if no outerHTML (eg. FF 2 - 10) XS = this.XMLSerializer && new XMLSerializer(); Slick.definePseudo(data, function(value){ return (this.outerHTML || XS.serializeToString(this)).test([data, value].join(hyphen)); }); }()); console.log($$("div:data(foo)")); console.log($$(":data(media-)")); 

updated example: http://jsfiddle.net/dimitar/pgZDw/3/

Answer 2

You can zoom in something like this by repeating the attributes for each element in the container and seeing if the attribute name matches the regular expression for what you are looking for:

For example, in this jsFiddle, I am looking for li elements with data-media-tv and data-media-dvd properties .

You can set up a regular expression to return only what you want to see. Do you want to see only elements that have media-data * (for example, in your question)? Here you go .

---

Keep in mind that this is not scalable. . Since we iterate through each element on the page and check each individual attribute (but return earlier if we find), this can and will probably be slow for large pages.

Limit this ONLY to the container you want to search for, or only those elements that you want to iterate over! If you run this against document.body , it will iterate over each element on the page, I will not be responsible if your house burns out as a result. :)

---

Here it is functional:

 function attrMatch(elements, regexp) { // Iterate through all passed-in elements, return matches var matches = elements.filter(function(li) { var numAttr = li.attributes.length; for(x=0;x<numAttr;x++) { var attr = li.attributes[x]; return attr['name'].test(regexp); } }); return matches; }; 

In elements , skip only those elements that you want to check, possibly selected through $$ . If you want to check all the elements in a container element, replace the elements with container and container.getChildren() in each instance of element above.

Answer 3

try this jsfiddle just know the (general) index / position of the data-media-* attribute and use in the code accordingly.

Answer 4

 $$('div[attrName="attrnameValue"]').each(function() { // `this` is the div });