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

Answer 1

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>

Answer 2

虽然您已经接受了问题的jQuery解决方案，这就是您所要求的，但是如果仅为了完成而添加一个简单的JavaScript方法也是值得的。

// 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');

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

JS Fiddle demo

参考文献：

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

2 个答案: