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

Question

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

请注意，我会将此搜索注入(inject)页面，因此我无法访问 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。例如，您可以将 document 替换为一些 div:

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>