I am not very familiar with classic JavaScript, so how would this lines look like at jQuery?
const siemas = document.querySelectorAll('.slider');
for(const siema of siemas) {
new Siema({
selector: siema
});
}
This ...
const siemas = document.querySelectorAll('.slider');
.. will be just (if I am right):
var siemas = $('.slider');
And this ...
for(const siema of siemas)
... will become somethink like:
$.each ???
If you have multiple slide shows
for..of vs simple for loop
const sliders = document.querySelectorAll('.slider');
for (let i=0;i<sliders.length;i++) {
new Siema({
selector: sliders[i]
});
}
for..of vs forEach
for..of is not supported by IE, but you can use a forEach instead. The forEach needs to be wrapped using spread since IE also does not support forEach on an HTML collection
[...document.querySelectorAll('.slider')].forEach(function() {
new Siema({
selector: this
});
})
for..of vs jQuery each
$('.slider').each(function() {
new Siema({
selector: this
})
})
perhaps (depending on your html) you can just do
const slideShow = new Siema({
selector: '.slider'
})
In jquery.
var siemas = $('.slider');
siemas.each(function(){
// this represent current element
new Siema({
selector: this
});
});
for..of is a widely available cycle, which is supported by all browsers, except the now deprecated IE. So, in jQuery you would do
$('slider').each(function() {
//this is the 'current' slider element
//$(this) is the jQuery object of the current slider
});
But it is not really advisable to increase depedency of jQuery, a technology that JS no longer needs just to support it. Instead, you could simply use your for..of loops while you write your code and use BabelJS to convert your code to ES5 so that IE will be able to cope with it. Example:
Converts
var arr = [1, 2, 3];
for (let item of arr) {
//do whatever with item
}
into
"use strict";
var arr = [1, 2, 3];
for (var _i = 0, _arr = arr; _i < _arr.length; _i++) {
//do whatever with item
var item = _arr[_i];
}
So, you can implement myscript.js and using Babel you can generates its ES5 version, let's call it myscript_ie.js. So, when your page is loaded, you can check whether the browser is IE. If not, then you can load your normal script. Otherwise you can load your IE version.
The reason for this specific recommendation is that for..of is only one of the features IE does not support, this answer aims to solve all these incompatibilities, or at least to greatly reduce them and goes beyond the problem of for..of