I would like to find all elements on page by partial tagname.
For example, I would like to find all elements whose tagname contains the word directive using JQuery.
<a-directive>...</a-directive> <directive-b>...</directive-b> I tried $("directive*"), $("*directive"), $("*directive*") none of them worked for me.
I have only found a way in JQuery to find elements by partial attribute match, such as $("[name*='something']")
But could not find a way to find elements by partial tagname.
Although jQuery has quite a range of selectors, I don't believe that they natively have support for targeting custom elements / tags.
Because of this, you would likely need to implement your own approach similar to the recommendation mentioned in this related discussion :
// Terribly inefficient approach (scope to parent element if at all possible var directives = $("*").filter(function(){ // Return any elements that contains directive as the node name return /^.*directive.*$/i.test(this.nodeName); }); Example
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <a-directive>A</a-directive> <div>Not A Directive</div> <directive-b>B</directive-b> <script> $(function(){ var $directives = $("*").filter(function(){ // Return any elements that contains directive as the node name return /^.*directive.*$/i.test(this.nodeName); }); // Color your directives $directives.css('color','red'); }); </script> </body> </html>Here is a way to create a custom selector using jQuery:
(function( $ ) { function icontains(elem, tagName) { return elem.nodeName.toLowerCase().indexOf((tagName || "").toLowerCase() ) > -1; } $.expr.pseudos.tagNameContains = $.expr.createPseudo ? $.expr.createPseudo(function( tagName ) { return function(elem) { return icontains(elem, tagName); }; }) : function(elem, i, match) { return icontains(elem, match[3]); }; })(jQuery); Then, you would use it like this:
//searches entire DOM for elements with 'directive' in tag name $(':tagNameContains(directive)') or
//searches under div.someClass for elements with 'directive' in tag name $('div.someClass :tagNameContains(directive)') 
directive, I would like to fetch them all for UI automation purposes.I tried different JQuery selectors that I am aware of and also searched online to select by partial tag name, could not find an answer, hence asked a question.