Create multiple sliders with JQuery automatically

Question

I was trying to make N sliders with JQuery in more automatic way using iteration and I have a few questions (working example is at the end).

Why does the first JQuery code work but second JS code does not work for producing multiple sliders? Shouldn`t this iterate over arr in the same way? Is there any other possible way to use JS for looping and pass arguments to JQuery for making sliders?

JQuery:

  var arr = [ "1" , 2, 3, 4];
  jQuery.each( arr, function( i, val ) {
    $( function() {
        $( "#slider"+val ).slider();
    } );
  });

And JS code:

for(var i=0; i<4; i++){
    $( function() {
        $( "#slider"+arr[i] ).slider();
    } );
  }

Here is the code in a simple example .

 var arr = ["1", 2, 3, 4]; // jQuery.each(arr, function(i, val) { console.log("#slider" + val) $(function() { $("#slider" + val).slider(); }); }); /*for(var i=0; i<4; i++){ $( function() { $( "#slider"+arr[i] ).slider(); } ); }*/

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="slider1"></div> <div id="slider2"></div> <div id="slider3"></div> <div id="slider4"></div>

Answer 1

Why do the iteration yourself? Let jQuery do the work

Also $(function() {}) is an alternative to $(document).ready(function(){}) so you complicate things far too much

 $(function() { $(".slider").slider(); })

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="slider" id="slider1"></div> <div class="slider" id="slider2"></div> <div class="slider" id="slider3"></div> <div class="slider" id="slider4"></div>

If you WANT to loop, loop over the existing elements

 $(function() { $(".slider").each(function() { $(this).slider() }) })

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="slider" id="slider1"></div> <div class="slider" id="slider2"></div> <div class="slider" id="slider3"></div> <div class="slider" id="slider4"></div>