将jquery（.each，.find，.next）转换为javascript

我参与将jquery代码转换为java脚本以满足要求。将jquery（.each，.find，.next）转换为javascript

例1：

没有与类名 “child_elems” 几个子元素ID为 “parent_elem” 父HTML DIV里面。我需要动态改变子元素的宽度。 jQuery代码如下所示：

$(#parent_elem).find(.child_elems).each(function(){ 
    $(this).css("width","50px"); 
});

JavaScript示例：

var parentelem = document.getElementById("parent_elem"); 

var childelems = parentelem.getElementsByClassName("child_elems"); 

for(var i=0;i<childelems.length;i++) 
    childelems[i].style.width = "50px";

这工作，但我不能确定这是否是一个有效的方法。

我们可以在不使用for循环的情况下执行相同的任务吗？在JavaScript中是否有任何与.each，.next，.find等效的内容？

我对javascript和jquery很新，也很感激任何的建议。

来源

2013-07-01 Dhevi

为什么你想避免'for'循环？这是对项目列表执行某些操作的自然选择。 jQuery的'.each（）'方法使用'for'循环来实现。 jQuery是“只是”用JavaScript编写的函数的集合，所以如果你查看[jQuery.js文件]（http://code.jquery.com/jquery-1.10.1），你可以看到你提到的函数是如何工作的.js文件）。 – nnnnnn

为什么你想要消除jQuery？ – amhed

“在JavaScript中是否有任何等效的.each，.next，.find”？如果有一个跨浏览器的等价物，jQuery团队为什么要实现这个版本？ – sabithpocker

如果必须的话，你绝对可以这样做，jQuery只是一个位于javascript之上的图层。当你写jQuery时，你正在写javascript。

如果你真的需要走这条路线，查看jQuery源代码可能会有帮助。 James Padolsey为检查jQuery提供的各种方法提供了一个非常有用的工具。你可以在这里看到这个工具：http://james.padolsey.com/jquery/#v=git&fn=jQuery.fn.next。

请记住，jQuery团队已花费年让他们的代码有效地工作，并为多个浏览器。如果您的代码在浏览器中失败，请不要感到惊讶。

来源

2013-07-01 11:56:17 imjared

您可以开始在github上查看这些函数代码。 .find = https://github.com/jquery/jquery/blob/master/src/traversing.js#L13 。每个= https://github.com/jquery/jquery/blob/master/src/core.js#L541

来源

2013-07-01 11:59:16

您可以在下面使用你的工作，但要小心，他们可能并不适用于所有浏览器。如果可能的话，使用jQuery总是安全的。

// jQuery -> JavaScript 
.each -> array.forEach(callback[, thisArg]) 
.find -> document.querySelector(selectors), document.querySelectorAll(selectors);

来源

2013-07-01 12:00:12 mohkhan

总是确定。但更好的性能 - 常常难以确定:) 我曾经以为像你以同样的方式，然后我看到这个 https://www.youtube.com/watch?v=pLISnANteJY 意想不到的洞察力和必须注意JavaScript开发人员 – Vatsal

将jquery（.each，.find，.next）转换为javascript

回答

相关问题