javascript - JQuery - 通过标签名称的后缀或前缀选择自定义元素

Question

假设我使用 HTML5 创建了一些自定义元素

<orange-juice>...</orange-juice>
<apple-juice>...</apple-juice>
<banana-juice>...</banana-juice>

果汁元素有很多种。我想通过使用它们的后缀的 jQuery 的一条指令来选择它们。

我试过了，但是没用:

$('$=juice').html('juice'); //the .html instruction is not important

如果我将它们一一呈现出来。

$('orange-juice').html('juice'); //this work
$('apple-juice').html('juice'); //this work
$('banana-juice').html('juice'); //this work

但是有很多这样的自定义元素以juice为后缀。如何在一条指令中选择它们。

编辑 1可以肯定的是，一个通用类会起作用，但是，这不是我的代码，而且这些元素太多了，无法一一讨论。但如果没有解决方案，我会(在一个月内)做出这个。

Answer 1

你可以试试.filter(fn)函数，这里是一个prefix

的例子

$('body *').filter(function() {
   return this.tagName.toLowerCase().indexOf('juice') == 0;
}).html('juice');

但是我建议您分配一个公共(public)类然后 Class Selector (“.class”)可以很容易地使用。

后缀示例，这里我使用了endsWith()方法

jQuery(function($) {
  $('body *').filter(function() {
    return this.tagName.toLowerCase().endsWith('juice');
  }).html('juice');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<orange-juice>...</orange-juice>
<apple-juice>...</apple-juice>
<banana-juice>...</banana-juice>