查找以指定前缀开头的自定义元素
我有一堆自定义元素，以“食品-cta-”开头。我正在寻找一种在JavaScript/jQuery中能够选择这些元素的方法。这类似于我如何使用$('*[class^="food-cta-"]')来选择以food-cta-开头的所有类。是否有可能搜索以“食品-cta-”开头的元素？
请注意，我将注入此搜索到页面，因此我将无法访问角。
自定义元素示例：
<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创建自定义元素，我认为这被称为指令。
回答 4
Stack Overflow用户
发布于 2016-05-31 18:24:30
可以在表达式中使用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>
Stack Overflow用户
发布于 2016-05-31 17:49:11
您可能只需转到相关元素并检查它们的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 *")
Stack Overflow用户
发布于 2016-05-31 18:12:30
试试这个..。
let customElements = $('*')
.filter((index,element) => /FOOD-CTI-/.test(element.tagName));注意，.tagName应该返回大写的结果。这将为您提供所需元素的jQuery对象。不过，它将遍历整个DOM。会很慢的。
它使用https://api.jquery.com/all-selector/。
注意:所有的，或通用的，选择器是非常慢的，除非它自己使用。
您也可以通过指定类似于$("body *")的内容来减少整个dom的遍历量。不确定在哪里放置了自定义元素，以及它们在哪里被允许。
顺便说一下，我不会使用自定义元素，微格式是一个更好的主意，至少现在是这样，它们也得到了更好的支持，并且它们不太可能改变。
https://stackoverflow.com/questions/37552066
复制相似问题
腾讯云开发者
