Replace JavaScript for loop with _.each() function

Question

I am trying to replace a JavaScript For Loop with the underscore.js each() function.

for (var x = 0; x < count; x++) {
  slider[x].setAttribute('id', arguments[x]);
  sliderPagination[x].setAttribute('id', arguments[x]+'Pagination');

  // Initialise swiper
  var slider = new Slider('#'+arguments[x], {
    pagination: '#'+arguments[x]+'Pagination',
    loop:true,
    grabCursor: true,
    paginationClickable: true
  })
}

I am new to using underscore so not quite sure the best way to do this. Do I need the index iteration when using the _.each() function for this?

UPDATE:

// Function to initialize multiple instances of slider plugin
function loadSliders(values) {

  var sliders = document.getElementsByClassName("swiper-container"),
      slidersPaginations = document.getElementsByClassName("swiper-pagination"),
      count = Math.min(sliders.length, arguments.length),
      i = 0;

  _.each(sliders, function(sliders, index) {
    var argumentsVariable = values[index];

    sliders.setAttribute('id', argumentsVariable);
    slidersPaginations[index].setAttribute('id', argumentsVariable+'Pagination');

    // Initialise swiper
    var slider = new Swiper('#'+argumentsVariable, {
      pagination: '#'+argumentsVariable+'Pagination',
      loop:true,
      grabCursor: true,
      paginationClickable: true
    })

  });

}

each is for iterating, this looks more like a case for times. — dandavis
– dandavis, Commented Feb 8, 2015 at 3:56

andrusieczko · Accepted Answer · 2015-02-08 04:41:08Z

2

I'm assuming here that you have 3 arrays: - sliders - sliderPaginations - arguments

Then, you can do it that way:

_.each(sliders, function(slider, index) {
  var argumentsVariable = arguments[index];
  slider.setAttribute('id', argumentsVariable);
  sliderPaginations[index].setAttribute('id', argumentsVariable+'Pagination');

  // Initialise swiper
  var slider = new Slider('#'+argumentsVariable, {
    pagination: '#'+argumentsVariable+'Pagination',
    loop:true,
    grabCursor: true,
    paginationClickable: true
  })
}

Note that you can use EcmaScript5 forEach method that is defined for each array:

sliders.forEach(function(slider, index) {
  var argumentsVariable = arguments[index];
  slider.setAttribute('id', argumentsVariable);
  sliderPagination.setAttribute('id', argumentsVariable+'Pagination');

  // Initialise swiper
  var slider = new Slider('#'+argumentsVariable, {
    pagination: '#'+argumentsVariable+'Pagination',
    loop:true,
    grabCursor: true,
    paginationClickable: true
  })
}

answered Feb 8, 2015 at 4:41

andrusieczko

2,82414 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cristopher Over a year ago

It may be interesting to note that _.each and [].forEach aren't exactly equal. _.each works with objects as well. _.each doesn't skip undefined values. [].forEach expects an array, and skips uninitialized values.

andrusieczko Over a year ago

That's right, thanks @Cristopher for extending my answer

Rob Fyffe Over a year ago

Perfect this worked. I have added the full correct code above. Thks

Collectives™ on Stack Overflow

Replace JavaScript for loop with _.each() function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related