Aroniaina Aroniaina - 1 month ago 6
Javascript Question

JQuery - Select custom elements by suffix or preffix

Consider that I create some custom elements with HTML5

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


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
juice
. How can I select them in one instruction.

EDIT 1
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).

Answer

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

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

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');
  }).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>