How to unify a sample of items?

Good evening. Faced with such a problem, how to make a unified method to add a class to the element, if I choose the selector in different ways?

https://jsfiddle.net/Lvns0vxo/3/
June 26th 19 at 14:24
3 answers
June 26th 19 at 14:26
First, if you use the function, you need to check it the element type if the array is to iterate through the loop!
For better understanding I suggest you see the source code of the function addClass in jquery, there is, in principle, everything is clear.

Here is my version, a little perepisanye, but is based on jquery addClass in:
Array.isArray = function(obj) {
 return /^\[object (NodeList|Array)\]$/.test(Object.prototype.toString.call(obj));
};

Document.prototype.addClass =
DocumentFragment.prototype.addClass =
NodeList.prototype.addClass =
Element.prototype.addClass = function(value) {
 if( typeof value === "string" && value ) {
 var j, current, clazz, finalValue;
 var stripAndCollapse = function(v, a) {
 var tokens = V. match(/[^\x20\t\r\n\f]+/g) || [];

 return a ? tokens : tokens.join(" ");
 }, classList = stripAndCollapse(value, true);

 var list; Array.isArray(this) ? (list = this) : (list = [] list.push(this));

 list.forEach(function(elem, i) {
 // This expression is here for better compressibility (see addClass)
 current = elem.nodeType === 1 && (" " + stripAndCollapse(elem.className) + " ");
 if( current ) {
 j = 0;
 while( (clazz = classList[j++]) ) {
 if( current.indexOf(" "+ clazz + " ") < 0 ) {
 current += clazz + " ";
}
}

 // Only assign if different to avoid unneeded rendering.
 finalValue = stripAndCollapse(current);
 if( finalValue !== elem.className ) {
 elem.setAttribute("class", finalValue);
}
}
});
}

 return this;
};
Wow. It's cool, but it seems very cumbersome)) - yoshiko_Corwin15 commented on June 26th 19 at 14:29
: For universal! the fact that it not only adds, but also verifies them and not touching node, thus not produced the extra rendering! - gretchen90 commented on June 26th 19 at 14:32
Your solution not works in IE/Edge due to the fact that the iterative function for NodeList is not defined. That override the default methods of standard objects is bad - I think you know that. Why in 2017 such monsters is not very clear. - willow.Hand commented on June 26th 19 at 14:35
June 26th 19 at 14:28
https://jsfiddle.net/cen1xxn0/1/
A little posprandial. You did not check, he finds something or not.
I fucked up =)
Look in the console https://jsfiddle.net/cen1xxn0/2/ - yoshiko_Corwin15 commented on June 26th 19 at 14:31
: https://jsfiddle.net/cen1xxn0/3/ - gretchen90 commented on June 26th 19 at 14:34
: Yes, I do the same thing - willow.Hand commented on June 26th 19 at 14:37
: https://jsfiddle.net/cen1xxn0/4/
this PPC has missed the last getElementsByClassName is actually a vestige of the last Millennium. - Lulu_Zulauf71 commented on June 26th 19 at 14:40
Yeah =) I also. but made simpler - check for length - Ralph_Cremin commented on June 26th 19 at 14:43
: well, the fact remains)). I will have a look at all the answers and understand that it is not so easy to do such a function - Lulu_Zulauf71 commented on June 26th 19 at 14:46
: Not at all! he merely needs to understand what data needs to function, and based on this to write it, with all its checks - Ralph_Cremin commented on June 26th 19 at 14:49
June 26th 19 at 14:30
https://jsfiddle.net/38fc6q17/1/
Working with array elements, set and individual.

Find more questions by tags JavaScript