是否可以将这个简单的jQuery代码片段转换为JavaScript？

我有一个简单的jQuery代码段（jQuery非常简单），我想将其转换为javascript，这似乎非常困难

例如，我不知道如何处理.each-function

希望你能帮助我，给我一个提示或快速解决问题

 $("#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(); 
});

对于

$.each（）

，您可以为

循环执行JavaScript
。您需要学习如何遍历DOM。你试过什么

最简单的方法就是学习如何使用普通的domapi（您可能会称之为：普通JavaScript）进行DOM遍历和操作

然而，对于某些事情来说，这可能是一种痛苦。（这就是为什么像jQuery这样的库最初被发明的原因）

谷歌搜索“JavaScriptDOM遍历/操作”应该会提供大量有用（但不太有用）的资源

这个网站上的文章非常好：

请确保在所有浏览器中也测试这一点

您可以阅读更多信息。
给您：

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]);
        }
    }
}

each（#rTab div[id^=tab]”，
功能（元素）{
if（element.innerHTML.trim（）.length>0）{
id=element.getAttribute（“id”）；
//警报（id）；
每个（#rTab li[rel=“+id+”]），
功能（元素）{
element.style.display='none'；
}
);
} 
}
)
每个（#rTab li[rel=“+id+”]），
功能（元素）{
element.style.display='none'；
)
);
每个（“.tabContent:first”，
功能（元素）{
element.style.display='block'；
)
);
每个（“ul.li”，
功能（元素）{
element.addEventListener(
“点击”，
职能（e）{
e=e | | window.event；
每个（“ul.li”，
职能（e）{
e、 setAttribute（'class'e.getAttribute（'class'）.replace（'active'，''）；
}
e、 target.setAttribute（'class'e.getAttribute（'class'）+“active”）；
每个（“.tabContent”，
功能（元素）{
element.style.display='none'；
)
);
var activeTab=e.target.getAttribute（“rel”）；
//$（“#”+activeTab.fadeIn（）；
//我不会写一个循环来淡入元素。
}
);
}
);
每个函数（选择器、func）{
var e=document.querySelectorAll（选择器）；
if（例如forEach）{
e、 forEach（func）；
}否则{
对于（变量i=0，l=e.length；i

是的，这更多的是代码。问题是所有这些jQuery选择器都可以返回多个元素，因此每个选择器都是一个循环。因此，别名使其略短一些

至少这会让您了解本机JS中的工作原理。请注意，
querySelectorAll
，以及
forEach
是IE 9+

另外，在
.style.display='none'；
和
.style.display='block'；
中，您可能希望以某种方式缓存旧的显示值，因为并非所有元素都使用
block
作为默认显示设置

如果这样做有效，我将+1以获得卓越。你是最棒的。让我开心！谢谢你。我将学习你的代码以更努力地提高我的技能。@Jimbo:可能会有一些错误，但这对OP来说是一个挑战，对吧？；-）我刚刚为每个使用
循环I的
添加了一些兼容代码f
forEach
不是available@Cerbrus：我将尝试你的代码。如果它不起作用，我将自己修复这个错误。