CODEWITHSUNDEEP
javascriptjquery
authorandrew
authorandrew

Reputation: 185

Convert jquery function to javascript

I'm trying to push my Javascript knowledge and improve for my current job as a designer-developer. The other developer and I cooperated on this jQuery to alter Squarespace's default menu behavior, which is really weird. But we're loading the entire jQuery library just to accomplish this one thing.

I'd like to rewrite the code to run in plain vanilla javascript so that I don't have to load the library on every website we make, but I'm not experienced enough in Javascript to just wing through this.

Here is the code:

$(function () {
    if ($(window).width() > 640) {
        $(function () {
            $(".folder-parent a").each(function () {
                $(this).next().find("a").first().hide();
            });
            $(".folder-parent a").click(function () {
                window.location = $(this).next().find("a").first().attr("href");
            });
        });
    }
});

I see some potential issues. First off, I know the class selector will have to be rewritten, or is there another way around that? I don't have the option of adding IDs so I can use getElementsById. Can Javascript hop through the DOM (next, find) and so on?

I'll put up my own attempt at rewriting this code, but I was wondering if y'all had any pointers for converting code, or any pitfalls to avoid, or things like that. Thank you very much!

Andrew

EDIT: Here is my attempt in vanilla Javascript. This is literally the first function I've ever written that's not from a tutorial, so it didn't work. What am I doing wrong? I guess I left some jQuery mixed in.

// Function to change the default menu behavior of Squarespace. Written minus jQuery!
function fixSquarespaceNav {
    if (document.documentElement.offsetWidth > 640) { 
        var navElement = document.querySelectorAll(".folder-parent a");
        foreach (navElement) { 
            this.next().find("a").first().style.display = "none";
        }
        navElement.onclick=function(){
            window.location = this.next().find("a").first().attr("href");
        }; /* navElement */
    }
}

Upvotes: 1

Views: 3557

Answers (1)

Oriol
Oriol

Reputation: 288130

A more or less literal translation is

function fixSquarespaceNav() {
    if (document.documentElement.offsetWidth > 640) { 
        var navElements = document.querySelectorAll(".folder-parent a");
        for(var i=0, l=navElements.length; i<l; ++i)
            navElements[i]
                .nextElementSibling
                .getElementsByTagName('a')[0]
                .style.display = "none";
        for(var i=0, l=navElements.length; i<l; ++i)
            navElements[i].onclick = function(){
                window.location =
                    this
                    .nextElementSibling
                    .getElementsByTagName('a')[0]
                    .getAttribute('href');
            };
    }
}

But you can use

(function() {
    function getAnchor(el) {
        return el.nextElementSibling.getElementsByTagName('a')[0];
    }
    function handler() { window.location = getAnchor(this).href; }
    return function fixSquarespaceNav() {
        var navElements = document.querySelectorAll(".folder-parent a");
        for(var i=0, l=navElements.length; i<l; ++i) {
            getAnchor(navElements[i]).style.display = "none";
            navElements[i].onclick = handler;
        }
    }
})();

Upvotes: 2

Related Questions