Question

I have this simple jQuery snippet (very simple with jQuery) and I want to convert this to javascript which seems to be really hard.

For example, I have no idea what to do with the .each – function.

Hope you can help, give me a hint or solve the problem quickly.

 $("#rTab div[id^=tab]").each(function(){
     if( !$.trim( $(this).html() ).length ) {
         id = $(this).attr("id");
     //alert(id);
         $("#rTab li[rel="+id+"]").hide();
     } 
 });

$(".tabContent").hide();
$(".tabContent:first").show(); 

//click MUSS live
$("ul.tabs li").live('click',function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tabContent").hide();
//MUSS rel, weil href mit location.hash in product.php so nicht läuft
var activeTab = $(this).attr("rel"); 
$("#"+activeTab).fadeIn(); 
});

Answer 1

Here you go:

each("#rTab div[id^=tab]",
    function(element){
        if(element.innerHTML.trim().length > 0) {
            id = element.getAttribute("id");
            //alert(id);
            each("#rTab li[rel="+id+"]",
                function(element){
                    element.style.display = 'none';
                }
            );
        } 
    }
)

each("#rTab li[rel="+id+"]",
    function(element){
        element.style.display = 'none';
    )
);
each(".tabContent:first",
function(element){
        element.style.display = 'block';
    )
);

each("ul.tabs li",
    function(element){
        element.addEventListener(
            'click',
            function(e) {
                e = e || window.event;
                each("ul.tabs li",
                    function(e){
                        e.setAttribute('class' e.getAttribute('class').replace("active",''));
                    }
                e.target.setAttribute('class' e.getAttribute('class') + "active");

                each(".tabContent",
                    function(element){
                        element.style.display = 'none';
                    )
                );
                var activeTab = e.target.getAttribute("rel"); 

                //$("#"+activeTab).fadeIn(); 
                // I'm not going to write a loop to fade in a element.
            }
        );
    }
);


function each(selector, func){
    var e = document.querySelectorAll(selector);
    if(e.forEach){
        e.forEach(func);
    }else{
        for(var i = 0, l = e.length; i < l; i++){
            func(e[i]);
        }
    }
}

It’s more code, yes. The problem is that all those jQuery selectors can return multiple elements, so it’s a loop for every selector. Hence the alias to make that slightly shorter.

At least this should give you an idea of how things work in native JS. Please note that the querySelectorAll isn’t supported on older browsers, and forEach is IE 9+.

Also, in the .style.display = 'none'; and .style.display = 'block';, you may want to cache the old display value somehow, since not all elements use block as default display setting.

An alternative to