-2

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(); 
});
JJJ
  • 32,902
  • 20
  • 89
  • 102
Sebastian Rush
  • 528
  • 6
  • 25

2 Answers2

3

For the $.each(), you could do a JavaScript FOR loop. You need to learn about traversing the DOM. What have you tried?

The easiest way is to just learn how to do DOM traversing and manipulation with the plain DOM api (you would probably call this: normal JavaScript).

This can however be a pain for some things. (which is why libraries like jQuery were invented in the first place).

Googling for "javascript DOM traversing/manipulation" should give plenty of helpful (and less helpful) resources.

The articles on this website are pretty good: http://www.htmlgoodies.com/primers/jsp/

Be sure to test this in all browsers, also.

You can read more here and here.

Community
  • 1
  • 1
Jimbo
  • 25,790
  • 15
  • 86
  • 131
2

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

Cerbrus
  • 70,800
  • 18
  • 132
  • 147