JQuery - Select custom elements by suffix or prefix of their tagName

javascript, jquery

Solution

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

$('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>

Problem

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

Original source