JQuery

Question

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

Satpal · Accepted Answer

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>

David Thomas · Answer

While you've already accepted a jQuery solution to the problem, which is what you asked for, it's worth also adding – if only for the sake of completion – a plain JavaScript approach for the same.

// declaring an object to contain the two functions:
let findElementsBy = {

  // retrieving all elements held within the <body> element,
  // we could instead use:
  // document.getElementsByTagName('*')
  // but this is just personal preference:
  'allElems': document.querySelectorAll('body *'),

  // declaring the 'suffix' function:
  // ending: String, a required argument which is 'ending'
  // by which we're filtering the retrieved elements:
  'suffix': function(ending) {

    // here we use Array.from() to convert the Array-like
    // NodeList into an Array:
    return Array.from(this.allElems)

      // we filter that Array using Array.prototype.filter():
      .filter(

        // here we use an Arrow function to keep only those
        // elements ('el', the current Array-element of the
        // Array over which we're iterating) whose lower-case
        // tagName ends with the supplied 'ending' String,
        // determined using String.prototype.endsWith(),
        // which returns a Boolean:
        el => el.tagName.toLowerCase().endsWith(ending)

      // this filtered Array is then passed back to the
      // calling context as an Array, which allows that
      // context to iterate through the returned elements
      // using Array methods.
      );
  },
  'prefix': function(beginning) {
    return Array.from(this.allElems)
      .filter(

        // this function is exactly the same as the above,
        // but here we use String.prototype.startsWith()
        // to find those elements whose lower-cased tagName
        // begins with the supplied String:
        el => el.tagName.toLowerCase().startsWith(beginning)
      );
  }
}

findElementsBy.suffix('juice').forEach(e => e.style.borderColor = 'limegreen');

findElementsBy.prefix('banana').forEach(e => e.style.backgroundColor = '#ffa');

let findElementsBy = {
  'allElems': document.querySelectorAll('body *'),
  'suffix': function(ending) {

    return Array.from(this.allElems)
      .filter(
        el => el.tagName.toLowerCase().endsWith(ending)
      );
  },
  'prefix': function(beginning) {
    return Array.from(this.allElems)
      .filter(
        el => el.tagName.toLowerCase().startsWith(beginning)
      );
  }
}

findElementsBy.suffix('juice').forEach(e => e.style.borderColor = 'limegreen');

findElementsBy.prefix('banana').forEach(e => e.style.backgroundColor = '#ffa');

orange-juice,
apple-juice,
banana-juice {
  display: block;
  border: 1px solid transparent;
  margin: 1em auto 0 auto;
  width: 80%;
}

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

JS Fiddle demo.

References:

Array.from().
Array.prototype.filter().
Array.prototype.forEach().
Arrow functions.
document.getElementsByTagName()
document.querySelectorAll().
String.prototype.endsWith().
String.prototype.toLowerCase().
String.prototype.startsWith().

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

Tags:

javascript

Aroniaina

2 Answers

Satpal

David Thomas

Recent Activity

Donate For Us