CODEWITHSUNDEEP
javascriptjqueryloops
albuvee
albuvee

Reputation: 2764

How to loop variable-names with jQuery

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.

Upvotes: 1

Views: 718

Answers (2)

Tushar
Tushar

Reputation: 87203

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

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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]);
}

Upvotes: 1

Related Questions