Skip to main content

Vanilla Javascript each()

By
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");
        };
    });

Comments

Post a Comment

Popular posts from this blog

WP similar or related posts widget without using any plugin

By
Hi guys, Recently I was working on some WP website and my client told me that he required a widget for displaying related/similar posts on the single post page. But as his website was already using many plugins, even for some pretty small tasks like this one, I decided not to use another WP plugin (plugins are not good for your WP websites, we will discuss about that on some other post.) I am not explaining the code as it is pretty simple if you are familiar with WP classes. But please let me know if you have any questions related to the PHP code posted below in the comments section or even much better, on Gist. You can add the following code directly in your child theme's functions.php file or you can create a separate file and include this at the bottom of functions.php file. <?php class similar_posts_widget extends WP_Widget {     function __construct()     {         parent::__construct('similar_posts_...
20 comments
Read more

Should javascript be enabled or disabled?

By
Javascript Javascript is the most popular client-end scripting language used by every website.  Javascript provides a way to create custom tools for the websites which are used to improve the overall site quality and UI (User Interface). It's also popular as it allow the audio and video streaming too. Google used the javascript to load the web page contents dynamically i.e., instead of redirecting the user to a new page or refreshing the same page, the contents are updated on the required parts on the web page. This dynamic content loading approach is known as AJAX which has now become much more popular as almost every website is using this, at least, to validate the form. Javascript vs No-Javascript Some people often disable the javascript from their browser settings. If you are one of them and think that javascript is a security threat, then, you are completely wrong. Javascript is a way to improve the website quality according to the client's machine and navigato...
Post a Comment
Read more

Java Program to display Welcome Message

By
import java.io.*;// I/O package imported. public class Welcome{        //class name is "Welcome"     public Welcome(){      //constructor declaired to print the message.         System.out.println("Welcome to Java Programming Language!");/* System.out.println is used for output. Welcome Message is written within " ".*/     }//display() closes here.     public static void main(String[] args){        //main() is declaired to declair an object in it.         Welcome obj=new Welcome();  //Object "Obj" is bean created.     }//main() closes. }//class "Welcome" ends here. Above program displays the message which is written by you in " ".  In programs "/*" and "*/" are use for multiple line comment(s) and "//" is use for single line comment. Code line "Welc...
Post a Comment
Read more