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

工作小提琴

PS:在上面的示例中,我将bodytag视为父元素.

更新:

在检查了Mohamed Meligy的帖子之后,在这种情况下,似乎正则表达式比字符串操作更快.如果我们使用它可能会变得更快(或相同)find.像这样的东西:

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

jsperf测试

更新2:

如果你想在文档中搜索,那么你可以做下面这个最快的:

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

jsperf测试

Answer 2

没有本地方法可以做到这一点,它具有最差的性能,所以,就这样做吧.

例:

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

完整示例:

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

注意:(更新,请参阅注释)

如果您想知道为什么我使用这种方式来检查标记名称,请参阅:
JavaScript:不区分大小写的搜索
并查看注释.

此外,如果您想知道该find方法而不是添加到选择器,因为选择器从右侧而不是从左侧匹配,所以最好将选择器分开.我也可以这样做:
$("*", $("div")).但最好不要只是div添加ID或其他内容,以便父匹配快速.

在评论中,你会发现它并不快.这虽然适用于非常简单的文档,但我相信,创建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更方便.