Aroniaina Aroniaina - 4 months ago 12
Javascript Question

JQuery - Select custom elements by suffix or preffix

Consider that I create some custom elements with HTML5


There are many type of juice elements. And I want to select them with a single instruction with jquery using their suffix.

I try that but it does not work :

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

If i take them one by one this work.

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

But there are many of these custom element suffixed by
. How can I select them in one instruction.

It's sure that a common class will work but, it's not my code and there are too many of these elements to take theme one by one.
But if no solution then, I will make this (during a month).


You can try .filter(fn) function, Here is an example of preffix

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

However I would recommend, you to assign a common class then Class Selector (“.class”) can be easily used.

Example of Suffix, Here I have used endsWith() method

jQuery(function($) {
  $('body *').filter(function() {
    return this.tagName.toLowerCase().endsWith('juice');
<script src=""></script>