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/

注意:(已更新，请参阅注释）

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

此外，如果您想知道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更方便。

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执行$（＆＃34; [class ^ =＆＃39; tag - x - ＆＃39;]＆＃34;）或同样的事情，这将是合理的快。

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.

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

9 个答案: