All geek questions in one place

JQuery - select custom elements using a suffix or prefix to their tagName

Believe that I create some custom elements with HTML5

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

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

I try this, 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 many of these custom items are suffixed by juice . How can I select them in one instruction.

EDIT 1 He is confident that the general class will work, but this is not my code, and too many of these elements will occupy the topic one by one. But if there is no solution then, I will do it (within a month).

+5
source share
2 answers

You can try .filter(fn) , here is an example of a prefix

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

However, I would recommend that you assign a generic class, then the Class Selector (.class) can be easily used.

endsWith() example, here I used the 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>
+6
source

While you've already made the jQuery solution you were asking for, you should also add - if only for the sake of completion - a simple JavaScript approach for this.

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

Literature:

+1
source

Source: https://habr.com/ru/post/1258540/

More articles:


All Articles