How to convert "for of" in classic JavaScript to jQuery?-CodePudding

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 ???

CodePudding user response：

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'
})

CodePudding user response：

In jquery.

var siemas = $('.slider');
siemas.each(function(){
    // this represent current element
    new Siema({
        selector: this
    });
});

CodePudding user response：

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