converting jquery(.each, .find,.next) to javascript - Stack Overflow

admin管理员组

文章数量:1434909

I'm involved in converting the jquery codes to java script for a requirement.

Example 1 :

There are a few child elements with class name "child_elems" inside a parent html div with id "parent_elem". I need to change the width of the child elements dynamically. The jquery code will look like this:

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

Sample 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";

This works but I m not sure whether this is an efficient way.

Can we do the same task without using for loop? Is there any equivalent for .each , .next, .find in javascript?

I'm very new to javascript and jquery as well, and would be thankful for any suggestions.

I'm involved in converting the jquery codes to java script for a requirement.

Example 1 :

There are a few child elements with class name "child_elems" inside a parent html div with id "parent_elem". I need to change the width of the child elements dynamically. The jquery code will look like this:

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

Sample 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";

This works but I m not sure whether this is an efficient way.

Can we do the same task without using for loop? Is there any equivalent for .each , .next, .find in javascript?

I'm very new to javascript and jquery as well, and would be thankful for any suggestions.

• javascript
• jquery

Share Follow edited Jul 1, 2013 at 11:53 nnnnnn 150k3030 gold badges209209 silver badges247247 bronze badges asked Jul 1, 2013 at 11:51 DheviDhevi 2311 silver badge44 bronze badges 3

• Why do you want to avoid a for loop? That's the natural choice to perform some action on a list of items. jQuery's .each() method is implemented using a for loop. jQuery is "just" a collection of functions written in JavaScript, so you can see how the functions you mentioned work if you look in the jQuery.js file. – nnnnnn Commented Jul 1, 2013 at 11:56
• Why would you want to eliminate jQuery? – amhed Commented Jul 1, 2013 at 11:57
• "Is there any equivalent for .each , .next, .find in javascript"? If there was a cross-browser equivalent why would jQuery team implement thir versions? – sabithpocker Commented Jul 1, 2013 at 12:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You may use below for your work, but beware they might not work with all browsers. It is always safe to use jQuery if possible.

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

You can definitely do this if you must, jQuery is just a layer that sits on top of javascript. When you write jQuery, you're writing javascript.

If you really need to go down this route, it might be helpful to look at the jQuery source. James Padolsey made a really helpful tool for inspecting the various methods that jQuery provides. You can see the tool here: http://james.padolsey./jquery/#v=git&fn=jQuery.fn.next.

Keep in mind that the jQuery team has spent years getting their code to work efficiently and for multiple browsers. Please don't be surprised if your code fails across browsers.

You could start looking at these functions code at github. .find = https://github./jquery/jquery/blob/master/src/traversing.js#L13 .each = https://github./jquery/jquery/blob/master/src/core.js#L541

本文标签： converting jquery(eachfindnext) to javascriptStack Overflow