Question

i’ve looked around on stackoverflow but only found a way to do the thing i want with jQuery. The code i found is this:

$("li:has(ul)").each(function(){
    $(this).find(">a").addClass("hasSubmenu");
});

Now I would like to turn that into plain Javascript. So I don’t need to include the jQuery librarie for this short piece of code.

Can somebody help me with turning this into JS code?

Answer 1

There are two answers here that I see. In modern browsers, you can use the querySelector and querySelectorAll methods to perform queries similar to jQuery:

var ulChildrenOfLi = document.querySelectorAll('li>ul');
for (var u = 0, ulen = ulChildrenOfLi.length; u < ulen; u++) {
    var liParent = ulChildrenOfLi[u].parentElement,
        aChildOfLi = liParent.querySelector('li>a');
    if (aChildOfLi) {
        aChildOfLi.className = aChildOfLi.className.replace("hasSubmenu", '') + " hasSubmenu";
    }
}

If you have to support IE, you could go with a bit more code:

var lis = document.getElementsByTagName('li');
for (var i = 0, len = lis.length; i < len; i++) {
    var li = lis[i],
        uls = li.getElementsByTagName('ul'),
        children = li.children;
    if (uls.length !== 0) {
        for (var c = 0, cl = children.length; c < cl; c++) {
            var kid = children[c];
            kid.className = kid.className.replace("hasSubmenu", '') + " hasSubmenu";
        }
    }
}

Here’s a jsFiddle with both: http://jsfiddle.net/ppxcy/1/