香草javascript中的each（）问题

Question

Everytime I try to reproduce .each() jQuery function in vanilla JavaScript, I'm in trouble.

When I try to change this :

$("[data-lng]").each(function(){
   var lng = $(this).data('lng');
   $('#language').text(lng)
});

To this :

var elem = document.querySelectorAll("[data-lng]");
Array.prototype.forEach.call(elem, function(){
    document.getElementById('language').write = elem.dataset.lng
});

Console returns elem.dataset is not defined

Plus, I'm dealing with data stuff so I'm not even sure if its legal to write this document.querySelectorAll("[data-lng]")

Thanks for your help !

PS : Here is an example of what I want to convert into vanilla JS : https://jsfiddle.net/x93oLad8/4/

Answer 1

First of all, instead of using:

Array.prototype.forEach.call(elem, function()

You can just use

elem.forEach(function()

Secondly, callback function can accept arguments (3 of them to be specific): el - current elem (which is the "this" you are looking for? :)) index - index of current elem in array list - the nodelist you loop over

Usage:

elem.forEach(function(el, index, list){
    console.log(el); //logs current element
});

Read more: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

@Edit: Since there was a big discussion in the comments about the first part, i feel obligated to link a thread on overriding default methods in JS: [].slice or Array.prototype.slice (aka why elem.forEach might not work, just in case :))

Answer 2

Its fairly trivial to swap your jsFiddle example out for vanilla JS. One 'gotcha' to be aware of is that IE has no support for NodeList.prototype.forEach() hence using a regular for loop instead. (See: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach )

 var dictionary = { 'greet': { 'it': 'Ciao', 'en': 'Hello', 'fr': 'Salut', } }; var langs = ['it', 'en', 'fr']; var current_lang_index = 0; var current_lang = langs[current_lang_index]; window.change_lang = function() { current_lang_index = ++current_lang_index % 3; current_lang = langs[current_lang_index]; translate(); } function translate() { /* jQuery: $("[data-translate]").each(function(){ var key = $(this).data('translate'); $(this).html(dictionary[key][current_lang] || "N/A"); });*/ /* vanilla */ var dt = document.querySelectorAll("[data-translate]"); //iterate over the NodeList: for (i = 0; i < dt.length; ++i) { var key = dt[i].getAttribute('data-translate');//get the key dt[i].innerHTML = (dictionary[key][current_lang] || "N/A");//set the text } } translate(); 

 <div data-translate="greet"></div> <button onclick="change_lang()">Change Language</button>