JavaScript For Loop to Repeat Code

Question

Sorry for the vague question title - unsure how to word this.

Basically, I have the following JavaScript that I want to condense using a for loop.

$('.q1').keyup(function () {
 if ($.inArray($(this).val().toLowerCase(), a1) > -1) {
 //Stuff
 } else {
 //Other stuff
 };
});
$('.q2').keyup(function () {
 if ($.inArray($(this).val().toLowerCase(), a2) > -1) {
 //Stuff
 } else {
 //Other stuff
 };
});

You can see that the only change between these two functions is the first class (either .q1 or .q2) and the array name (either a1 or a2). So far, I have done the following...

for (var i=1; i<=8; i++) {
 $('.q'+i).keyup(function () {
 if ($.inArray($(this).val().toLowerCase(), a1) > -1) {
 //Stuff
 } else {
 //Other stuff
 };
 });
}

You can see that the first class issue has been solved with the incrementing i variable, but I am unsure how I can make the array value change on each loop so that it goes a1, a2, a3, a4 etc.

Any help would be much appreciated. Thank you.

EDIT

The a1 and a2 refers to arrays...

var a1 = new Array();
a1[0] = "egypt";
var a2 = new Array();
a2[0] = "brasil";
a2[1] = "brazil";

I have an array for each answer to a quiz. In each array are the possible answers to each question.

• Denys Séguret: You'd better use an array instead of variables a1, a2, etc.
• Rory McCrossan: Why bother looping through elements when you can just add a single class to all the elements and hang the keyup event off that?
• C3roe: Your variables a1, a2 seem to be logically connected – same data structure, I assume, because otherwise you wouldn’t perform the same actions on them? Then don’t use individual variables with numbers in their names (which in 99.999...% of cases indicates that you’re doing it wrong) – but use an array as data structure for this data as well!
• Grundy: is a1,a2, etc a global variable?
• user2586455: a1 and a2 are two separate arrays. Please see the edit to my question.

Answer 1

There's a data structure commonly used for that type of problems : arrays. They're much more suited to your problem than having a bunch of variables.

Supposing you have an array a, you can do

for (var i=1; i<=8; i++) {
 (function(answers){
 $('.q'+i).keyup(function () {
 if ($.inArray($(this).val().toLowerCase(), answers) > -1) {
 $('#r').text('ok');
 } else {
 $('#r').text('not ok');
 };
 });
 })(a[i-1]);
}

Your array would be initialized like this :

var a = [];
a.push([
 "egypt"
]);
a.push([
 "brasil",
 "brazil"
]);

Demonstration

• user2586455: Please see my edit to the original question. I have multiple arrays to hold the acceptable answers for each question in a quiz.
• Denys Séguret: @user2586455 I edited to show how the array a could be created, is that clearer ?
• Chris Charles: So you need an array or arrays. Simple really
• Denys Séguret: In fact, in most cases, what you really need is probably an array of objects containing both the possible answers and the questions (and other stuff), so that you don't share the data between the HTML and the JavaScript but a first step could be an array of arrays.
• user2586455: This doesn't seem to be working. If I type 'egypt' into the first input field (.q1) it returns false.

Answer 2

Change this: var a1 = new Array(); a1[0] = "egypt";

var a2 = new Array();
a2[0] = "brasil";
a2[1] = "brazil";

to this:

var a = new Array();
a.push(["egypt"]);
a.push(["brasil","brazil"]);

So that

a[0][0] == a0[0] == "egypt"

a[1][0] == a1[0] == "brasil"

a[1][1] == a1[1] == "brazil"

Then the if statement becomes:

for (var i=1; i<=8; i++) {
 $('.q'+i).keyup(function () {
 if ($.inArray($(this).val().toLowerCase(), a[i-1]) > -1) {
 //Stuff
 } else {
 //Other stuff
 };
 });
}

• user2586455: Can you explain how I would need to edit the if statement with this updated array format?