在jQuery中选择以“x-”开头的标签

Question

如何选择以"x-" 标记名称开头的节点，这是一个层次结构 DOM 树示例：

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

jQuery 不允许我查询$('x-*')，有什么方法可以实现吗？

Answer 1

下面的工作正常。虽然我不确定使用正则表达式时的性能。

$('body *').filter(function(){
    return /^x-/i.test(this.nodeName);
}).each(function(){
    console.log(this.nodeName);
});

Working fiddle

PS：在上面的示例中，我将body标签视为父元素。

更新：

查看 Mohamed Meligy 的帖子后，在这种情况下，似乎正则表达式比字符串操作更快。如果我们使用find，它可能会变得更快（或相同）。像这样的：

$('body').find('*').filter(function(){
    return /^x-/i.test(this.nodeName);
}).each(function(){
    console.log(this.nodeName);
});

jsperf test

更新 2：

如果您想在文档中搜索，那么您可以执行以下最快的操作：

$(Array.prototype.slice.call(document.all)).filter(function () {
    return /^x-/i.test(this.nodeName);
}).each(function(){
    console.log(this.nodeName);
});

jsperf test

Answer 2

没有本地方法可以做到这一点，它的性能最差，所以，自己做吧。

示例：

var results = $("div").find("*").filter(function(){
    return /^x\-/i.test(this.nodeName);
});

完整示例：

http://jsfiddle.net/6b8YY/3/

注意事项：（已更新，见 cmets）

如果您想知道为什么我使用这种方式来检查标签名称，请参阅：
JavaScript: case-insensitive search
并查看 cmets。

另外，如果你想知道 find 方法而不是添加到选择器，因为选择器是从右而不是从左匹配的，最好将选择器分开。我也可以这样做：
$("*", $("div"))。最好不要只添加div，而是添加一个 ID 或其他内容，以便快速匹配父项。

在 cmets 中，您会发现它并没有更快的证据。尽管我相信这适用于非常简单的文档，其中创建 jQuery 对象的成本高于搜索所有 DOM 元素的成本。但在实际的页面大小中，情况并非如此。

更新：

我也很喜欢 Teifi 的回答。您可以在一个地方完成它，然后在任何地方重复使用它。例如，让我将我的方式与他的方式混合起来：

// In some shared libraries location:
$.extend($.expr[':'], {
    x : function(e) {
            return /^x\-/i.test(this.nodeName);
    }
});

// Then you can use it like:
$(function(){
    // One way
    var results = $("div").find(":x");

    // But even nicer, you can mix with other selectors
    //    Say you want to get <a> tags directly inside x-* tags inside <section>
    var anchors = $("section :x > a");

    // Another example to show the power, say using a class name with it:
    var highlightedResults = $(":x.highlight");
    // Note I made the CSS class right most to be matched first for speed
});

同样的性能损失，但更方便的 API。

Answer 3

这可能效率不高，但如果您没有得到任何答案，请考虑将其作为最后的选择。
尝试向这些标签添加自定义属性。我的意思是当您为例如添加标签时。 <x-tag>，为其添加一个自定义属性并为其分配与标签相同的值，因此html看起来像<x-tag CustAttr="x-tag">。
现在要获取以x- 开头的标签，您可以使用以下 jQuery 代码：

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

你会得到所有以x-开头的标签

Answer 4

自定义 jquery 选择器

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

然后，使用$(":X") 或$("*:X") 选择您的节点。

Answer 5

虽然这不能直接回答问题，但它可以提供一个解决方案，通过“定义”选择器中的标签，您可以获得所有该类型？

$('x-tab, x-map, x-footer')

Answer 6

解决方法：如果你不止一次想要这个东西，添加一个基于标签的类可能会更有效 - 你在开始时只做一次，然后你过滤为标记简单的方法。

我的意思是，

function addTagMarks() {
    // call when the document is ready, or when you have new tags

    var prefix = "tag--"; // choose a prefix that avoids collision
    var newbies = $("*").not("[class^='"+prefix+"']"); // skip what's done already

    newbies.each(function() {
        var tagName = $(this).prop("tagName").toLowerCase();
        $(this).addClass(prefix + tagName);
    });

}

在此之后，您可以使用 querySelectorAll 执行 $("[class^='tag--x-']") 或相同的操作，它会相当快。

Answer 7

看看这是否有效！

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;
}

Answer 8

Demo Fiddle

var i=0;
for(i=0; i< document.all.length; i++){
    if(document.all[i].nodeName.toLowerCase().indexOf('x-') !== -1){
        $(document.all[i].nodeName.toLowerCase()).addClass('test');
    }
}

Answer 9

试试这个

var test = $('[x-]');
if(test)
    alert('eureka!');

基本上 jQuery 选择器的工作方式类似于 CSS 选择器。 Read jQuery selector API here.