преобразование jquery (.each, .find, .next) в javascript

Question

Я участвую в преобразовании jquery-кодов в java-скрипт для требования.

Пример 1:

Есть несколько дочерних элементов с именем класса «child_elems» внутри родительского HTML DIV с идентификатором «parent_elem». Мне нужно динамически изменять ширину дочерних элементов. Код 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"; 

Это работает, но я не уверен, является ли это эффективным способом.

Можем ли мы выполнить ту же задачу без использования цикла? Есть ли эквивалент для .each, .next, .find в javascript?

Я очень новичок в javascript и jquery, а также буду благодарен за любые предложения.

Answer 1

Вы можете это сделать, если нужно, jQuery - это просто слой, который находится поверх javascript. Когда вы пишете jQuery, вы пишете javascript.

Если вам действительно нужно спуститься по этому маршруту, может быть полезно посмотреть на источник jQuery. Джеймс Падолси сделал очень полезный инструмент для проверки различных методов, которые предоставляет jQuery. Вы можете увидеть инструмент здесь: http://james.padolsey.com/jquery/#v=git&fn=jQuery.fn.next.

Имейте в виду, что команда jQuery потратила лет, чтобы их код работал эффективно и для нескольких браузеров. Пожалуйста, не удивляйтесь, если ваш код не работает в браузерах.

Answer 2

Вы можете начать просмотр кода этих функций в github. .find = https://github.com/jquery/jquery/blob/master/src/traversing.js#L13 .each = https://github.com/jquery/jquery/blob/master/src/core.js#L541

Answer 3

Вы можете использовать ниже для вашей работы, но будьте осторожны, они могут не работать со всеми браузерами. Всегда безопасно использовать jQuery, если это возможно.

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