JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
JavaScript
// Anonymous function
(function () {
var Library = function (params) {
var selector = document.querySelectorAll(params),
i = 0;
this.length = selector.length;
for (; i < this.length; i++) {
this[i] = selector[i];
}
return this;
};
var Q = function (params) {
return new Library(params);
};
// Assign our Q object to global window object.
Q.fn = Library.prototype = {
nth: function( cur, result, dir, elem ) {
result = result || 1;
var num = 0;
for ( ; cur; cur = cur[dir] ) {
if ( cur.nodeType === 1 && ++num === result ) {
break;
}
}
return cur;
},
next: function () {
},
hide: function () {
var len = this.length;
while (len--) {
this[len].style.display = 'none';
}
return this;
},
show: function () {
var len = this.length;
while (len--) {
this[len].style.display = 'block';
}
return this;
}
};
if(!window.Q) {
window.Q = Q;
}
})();
console.log(Q("li").hide().show());