Iterate through Id's, store values, put into an array

Question

I want to be able to iterate through a number of ids called "#option1", "#option2" etc. The problem is its for an interactive form and I don't know how many options there will be. So I need a way to iterate through the amount in the DOM when the user clicks ("#dothis").

Then I need to get the values of the those options, put into an array called arraylist.

$("#doThis").on("click", function() {
            var optionone = $("#option1").val();
            var optiontwo = $("#option2").val();
            var optionthree = $("#option3").val();
            var optionfour = $("#option4").val();
            var optionfive = $("#option5").val();
            var arrayList = [optionone, optiontwo, optionthree,
                optionfour, optionfive];
            var decide = arrayList[Math.floor(Math.random() *
                arrayList.length)];
            $("#verdict").text(decide);
        }); // end of dothis click event

Add an option class to each of them then just gather them all up with $('.option'). — Andy
– Andy, Commented Apr 28, 2015 at 15:50
You can use starts with selector, as indicated in this answer: stackoverflow.com/a/23223564/1401341 (although author recommends adding a common class, like Andy). — Fernando
– Fernando, Commented Apr 28, 2015 at 16:00

Timotheus0106 · Accepted Answer · 2015-04-29 08:56:26Z

1

As Andy said, give every option the same class. In my example it's "option-item".

$("#doThis").on("click", function() {
  var arrayList = [];
  $('.option-item').each(function(i) {
    arrayList[i] = $(this).val();
  });
  var decide = arrayList[Math.floor(Math.random() *
      arrayList.length)];
  $("#verdict").text(decide);
});

Every value is now stored in the array.

see fiddle.

greetings timmi

edited Apr 29, 2015 at 8:56

answered Apr 28, 2015 at 15:58

Timotheus0106

1,5863 gold badges18 silver badges28 bronze badges

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

4 Comments

Matt Over a year ago

You don't need to keep an iterator variable. The first argument of the each() callback is the iteration count. See: api.jquery.com/each

artworkjpm Over a year ago

I like the idea of using a class but it didn't work. The issue seems to be with the <textarea class="opt"> Try it on the js fiddle? jsfiddle.net/artworkjpm/n4y4dhbd

Timotheus0106 Over a year ago

it did work. only the variable was named wrong. arraylist and arrayList. camelcase problem. see fiddle :) jsfiddle.net/n4y4dhbd/1

artworkjpm Over a year ago

The L's in arrayList were not capitalised!!! it does work, thankyou Timmi and the others

Ted · Accepted Answer · 2015-04-28 15:58:29Z

0

With your code as is, you can use a selector that selects everything with an ID that starts with 'option', like so [id^="option"], here's how to use it:

   $("#doThis").on("click", function () {
        var arrayList = [];
        $('[id^="option"]').each(function (index, element) {
            arrayList.push($(element).val() );
        });

        var decide = arrayList[Math.floor(Math.random() *
            arrayList.length)];
        $("#verdict").text(decide);
    }); // end of dothis click event

answered Apr 28, 2015 at 15:58

Ted

14.9k2 gold badges43 silver badges58 bronze badges

Collectives™ on Stack Overflow

Iterate through Id's, store values, put into an array

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related