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

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

您可能只需转到有问题的元素并检查它们的 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 *")