javascript - 将 jquery(.each, .find,.next) 转换为 javascript

Question

我参与了将 jquery 代码转换为 java 脚本以满足需求。

示例 1:

在 id 为“parent_elem”的父 html div 中有几个类名为“child_elems”的子元素。我需要动态更改子元素的宽度。 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 循环来完成同样的任务吗？ .each , .next, .find 在 javascript 中是否有等价物？

我也是 javascript 和 jquery 的新手，如果有任何建议，我将不胜感激。

Answer 1

您可以在工作中使用下面的内容，但请注意它们可能不适用于所有浏览器。如果可能，使用 jQuery 总是安全的。

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