Question

我想通过部分标记名找到页面上的所有元素。

例如，我想使用JQuery找到标记名包含单词directive的所有元素。

<a-directive>...</a-directive>
<directive-b>...</directive-b>

我尝试了$("directive*")，$("*directive")，$("*directive*")这些都没有为我效力。

我在JQuery中找到了一种通过部分属性匹配来查找元素的方法，例如$("[name*='something']")

但无法通过部分标记名找到找到元素的方法。

Answer 1

虽然jQuery有range of selectors，但我不相信他们原生支持定位元素/标签。

因此，您可能需要实施自己的方法，类似于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);
});

示例

＆＃13;
＆＃13;
<!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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

这是一种使用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);

然后，你会像这样使用它：

//searches entire DOM for elements with 'directive' in tag name
$(':tagNameContains(directive)')

或

//searches under div.someClass for elements with 'directive' in tag name
$('div.someClass :tagNameContains(directive)')

Source

JQuery通过部分标记名来查找元素

2 个答案: