Question

我有一堆以'food-cta-'开头的自定义元素。我正在寻找JavaScript / jQuery中的一种方法来选择这些元素。这与我使用$('*[class^="food-cta-"]')选择以food-cta-开头的所有类的方式类似。是否可以搜索以'food-cta - '开头的元素？

请注意，我会将此搜索注入页面，因此我无法访问Angular。

自定义元素的示例：

<food-cta-download>
<food-cta-external>
<food-cta-internal>

编辑：我看的代码如下：

<food-cta-download type="primary" description="Download Recipe">
    <img src="">
    <h2></h2>
    <p></p>
</food-cta-download>

该应用程序使用AngularJS创建自定义元素，我相信这些元素称为指令。

Answer 1

您可以将XPath与表达式

一起使用

 //*[starts-with(name(),'food-cta-')]

哪里

//*是所有节点的通配符
starts-with()是一个XPath函数，用于测试以某个值开头的字符串
name()获取QName（节点名称）
和'food-cta-'是搜索字词

将其传递到document.evaluate，您将获得一个XPathResult，它将为您提供匹配的节点。

var result = document.evaluate( "//*[starts-with(name(),'food-cta-')]", document, null, XPathResult.ANY_TYPE, null );

请注意，您可以使用任何节点作为根，您不需要使用document。因此，您可以使用某些div替换document：

var container = document.getElementById("#container");
var result = document.evaluate( "//*[starts-with(name(),'food-cta-')]", container, null, XPathResult.ANY_TYPE, null );

演示

let result = document.evaluate( "//*[starts-with(name(),'food-cta-')]", document, null, XPathResult.ANY_TYPE, null );

let nodes = [];
let anode = null;

while( (anode = result.iterateNext()) ){
   nodes.push( anode.nodeName );
}

console.log(nodes);

<div id="container">
  <br>
  <food-cta-download type="primary" description="Download Recipe">
    <img src="">
    <h2></h2>
    <p></p>
  </food-cta-download>
  <span>Some span</span>
  <food-cta-something>
    <img src="">
    <h2></h2>
    <p></p>
  </food-cta-something>
  <div>In between
      <food-cta-sub>
         <img src="">
         <h2></h2>
         <p></p>
      </food-cta-sub>
  </div>
  <food-cta-hello>
    <img src="">
  </food-cta-hello>
  <food-cta-whattt>
  </food-cta-whattt>
</div>

Answer 2

您可能只需要查看相关元素并检查其tagName是否以该给定字符串开头...

var myPrefix = "mycustom-thing-";

$("body").children().each(function() {
  if (this.tagName.substr(0, myPrefix.length).toLowerCase() == myPrefix) {
    console.log(this.innerHTML); // or what ever 
  }
})

https://jsfiddle.net/svArtist/duLo2d0z/

编辑：为了效率而包括：

如果您可以预测元素的位置，您当然可以指定这种情况。在我的示例中，所讨论的元素是body的直接子元素 - 所以我可以使用.children()来获取它们。这不会越过低级别。

通过以下方式减少遍历的需要：

从所需的最低级别（$("#specific-id")而非$("body")）

开始

如果要找到所有元素作为容器的直接子：

在容器上使用$.children()以获得直接孩子

否则

使用$.find("*")

如果您可以告诉包含上下文的内容，请按

进行过滤

例如$("#specific-id").find(".certain-container-class .child-class *")

Answer 3

试试这个..

let customElements = $('*')
  .filter((index,element) => /FOOD-CTI-/.test(element.tagName));

注意，.tagName应该以大写形式返回结果。这应该为您提供所需元素的jQuery对象。它将遍历整个DOM。它会很慢。

这使用{{3}}。

警告：全选或通用选择器非常慢，除非单独使用。

通过指定$("body *")之类的东西，你也可以遍历整个dom。不确定您放置自定义元素的位置，以及它们被允许的位置。

另外，我不会使用自定义元素，微格式至少在现在是一个更好的主意，它们也得到更好的支持，并且它们不太可能改变。

Answer 4

为什么不extend jquery selectors？

$(':tag(^=food-cta-)')

可以使用以下实现：

$.expr[':'].tag = function tag(element, index, match) {
  // prepare dummy attribute
  // avoid string processing when possible by using element.localName
  // instead of element.tagName.toLowerCase()
  tag.$.attr('data-tag', element.localName || element.tagName.toLowerCase());
  // in :tag(`pattern`), match[3] = `pattern`
  var pattern = tag.re.exec(match[3]);
  // [data-tag`m`="`pattern`"]
  var selector = '[data-tag' + (pattern[1] || '') + '="' + pattern[2] + '"]';
  // test if custom tag selector matches element
  // using dummy attribute polyfill
  return tag.$.is(selector);
};

// dummy element to run attribute selectors on
$.expr[':'].tag.$ = $('<div/>');
// cache RegExp for parsing ":tag(m=pattern)"
$.expr[':'].tag.re = /^(?:([~\|\^\$\*])?=)?(.*)$/;

// some tests
console.log('^=food-cta-', $(':tag(^=food-cta-)').toArray());
console.log('*=cta-s', $(':tag(*=cta-s)').toArray());
console.log('food-cta-hello', $(':tag(food-cta-hello)').toArray());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <br>
  <food-cta-download type="primary" description="Download Recipe">
    <img src="">
    <h2></h2>
    <p></p>
  </food-cta-download>
  <span>Some span</span>
  <food-cta-something>
    <img src="">
    <h2></h2>
    <p></p>
  </food-cta-something>
  <div>In between
    <food-cta-sub>
      <img src="">
      <h2></h2>
      <p></p>
    </food-cta-sub>
  </div>
  <food-cta-hello>
    <img src="">
  </food-cta-hello>
  <food-cta-whattt>
  </food-cta-whattt>
</div>

这支持伪CSS样式的attribute selector，其语法为：

:tag(m=pattern)

或者只是

:tag(pattern)

其中m为~,|,^,$,*，而pattern是您的代码选择器。

查找以指定前缀开头的自定义元素

4 个答案: