Select tags that starts with “x-” in jQuery

Question

How can I select nodes that begin with a "x-" tag name, here is an hierarchy DOM tree example:

<div>
  <x-tab>
    <div></div>
    <div>
      <x-map></x-map>
    </div>
  </x-tab>
</div>
<x-footer></x-footer>

jQuery does not allow me to query $('x-*'), is there any way that I could achieve this?

Answer 1

custom jquery selector

jQuery(function($) {
    $.extend($.expr[':'], {
        X : function(e) {
            return /^x-/i.test(e.tagName);
        }
    });
});

than, use $(":X") or $("*:X") to select your nodes.

Answer 2

It might not be efficient, but consider it as a last option if you do not get any answer.
Try adding a custom attribute to these tags. What i mean is when you add a tag for eg. <x-tag>, add a custom attribute with it and assign it the same value as the tag, so the html looks like <x-tag CustAttr="x-tag">.
Now to get tags starting with x-, you can use the following jQuery code:

$("[CustAttr^=x-]")

and you will get all the tags that start with x-

Answer 3

See if this works!

function getXNodes() {
  var regex = /x-/, i = 0, totalnodes = [];
  while (i !== document.all.length) {
    if (regex.test(document.all[i].nodeName)) {
      totalnodes.push(document.all[i]);
    }
    i++;
  }
  return totalnodes;
}