How to loop variable-names with jQuery

Question

How can I loop in jQuery through something like this:

<select class="js-setup">
    <option value="">Choose</option>
    <option value="setup1" data-setup0="1" data-setup1="4" data-setup2="3" data-setup3="3">1 Ananas, 4 Eggs, 3 Apples, 3 Banana</option>
    <option value="setup2" data-setup0="1" data-setup1="4" data-setup2="4" data-setup3="2">1 Ananas, 4 Eggs, 4 Apples, 2 Banana</option>
    <option value="setup3" data-setup0="1" data-setup1="4" data-setup2="5" data-setup3="1">1 Ananas, 4 Eggs, 5 Apples, 1 Banana</option>
</select>

… so I don't have to repeat the lines over-and-over?

// var setupCount == 4
$setup.on('change',function(){
   var $that = $(this),
       setup0,
       setup1,
       setup2,
       setup3;

   // get user-selected setup
   setup0 = $that.find(':selected').data('setup0');
   setup1 = $that.find(':selected').data('setup1');
   setup2 = $that.find(':selected').data('setup2');
   setup3 = $that.find(':selected').data('setup3');

  // set user-selected to the progress-indicator
   $('.js-availableToSelect:eq(0)').text(setup0);
   $('.js-availableToSelect:eq(1)').text(setup1);
   $('.js-availableToSelect:eq(2)').text(setup2);
   $('.js-availableToSelect:eq(3)').text(setup3);
});

THE APP DOES KNOW (from a var «setupCount») that there are a total of 4 data-setup possibilities.

Use an array instead of 4 separate variables, and form the data attribute name with string concatenation. — Pointy
– Pointy, Commented May 2, 2016 at 13:34

Tushar · Accepted Answer · 2016-05-02 13:40:25Z

1

You can use for loop to iterate and eq() to select the element by index.

// var setupCount == 4
$setup.on('change', function () {
    var selected = $(this).find(':selected'); // Cache for better performance

    for(var i = 0; i < 3; i++) {
        $('.js-availableToSelect').eq(i) // Get the element at `i`th index
            .text(selected.data('setup' + i)); // Set the value of data attribute
    }
});

You can also use text() with callback.

$setup.on('change', function () {
    var selected = $(this).find(':selected'); // Cache for better performance

    $('.js-availableToSelect').text(function(i) {
        return selected.data('setup' + i);
    });
});

edited May 2, 2016 at 13:40

answered May 2, 2016 at 13:35

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

6 Comments

jcubic Over a year ago

You can save $that.find(':selected') in variable to not do the same operation in a loop.

Tushar Over a year ago

@jcubic I was doing that. Thanks

albuvee Over a year ago

HAH, dam*, I had that tried out many times before I did post the question here … but I always used «'setup'+[i]» and «.eq([i])» … thanks for opening my eyes! :-)

albuvee Over a year ago

@Tushar: THX! which one would be the superior one? (performance, workload) … for + eq(), or text() with callback?

Tushar Over a year ago

@albuvee IMO, text() should be faster.

|

Marcos Pérez Gude · Accepted Answer · 2016-05-02 13:35:56Z

1

As easy as this:

var setup = [];
for(i = 0; i < 4; i++) {
  setup[i] = $that.find(":selected").data('setup'+i);
  $('.js-availableToSelect:eq('+i+')').text(setup[i]);
}

answered May 2, 2016 at 13:35

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

2 Comments

albuvee Over a year ago

HAH, dam*, I had that tried out many times before I did post the question here … but I always used «[i]» instead of «i» alone … thanks for opening my eyes! :-)

Marcos Pérez Gude Over a year ago

You are welcome! Please, select the answer you want to give the correct answer :)

Collectives™ on Stack Overflow

How to loop variable-names with jQuery

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related