Vanilla Javascript each()

JQuery's each() is very useful when iterating through elements. But you don't want to use JQuery in your project you can simply add the following javascript code which works somewhat similar to the JQuery's each function.

Here the fnc parameter is the function string which is converted to a valid function call replacing all the $(this) with this

/**
 * This function binds a particular function to every element with the specified selector. It is somewhat same as JQuery's each() with less functionality
 * @param {String|DOMElement} selector
 * @param {Function} fnc
 */
function each(selector, fnc) {
    var elem;
    if (typeof selector === "string") {
        elem = $_(selector);
    } else {
        elem = selector;
    }
    fnc = (fnc.toString().replace("$(this)", "elem") + "();").replace("function () {", "").replace("}();", "");
    fnc = Function("elem", fnc);
    for (var i = 0; i < elem.length; i++) {
        fnc(elem[i]);
    }
}

You can use the above each() function with AngularJS & Bootstrap to switch between tabs. You can do so as follows:-

each("[data-toggle=tab]", function () {
        $(this).onclick = function (e) {
            e.preventDefault();
            var parent = this.parentNode;
            var cls = parent.getAttribute("class");
            var children = parent.parentNode.getElementsByTagName("li");
            var tab = this.getAttribute("href");
            for (var i = 0; i < children.length; i++) {
                if (children[i].hasAttribute("class")) {
                    children[i].setAttribute("class", children[i].getAttribute("class").replace("active", "").trim());
                }
            }
            if (cls == null) {
                parent.setAttribute("class", "active");
            } else {
                if (cls.indexOf("active") == -1) {
                    parent.setAttribute("class", cls + " active");
                } else {
                    parent.setAttribute("class", "active");
                }
            }
            each(".tab-content>div.tab-pane", function () {
                var el = $(this);
                el.setAttribute("class", el.getAttribute("class").replace("active", "").trim());
            });
            $(".tab-content>div" + tab).setAttribute("class", $(".tab-content>" + tab).getAttribute("class") + " active");
        };
    });