jQuery Class Selectors - referencing individual elements

jQuery Class Selectors - referencing individual elements

Is there a way to reference individual indexes of items within a class selector, when using a for loop? It's probably best if I explain what I am trying to achieve. I have three combo boxes which I would like to fill with, pretty much, the same items.

  1. <select name="cboOne" id="cboOne" class="myCombos"></select>
  2. <select name="cboTwo" id="cboTwo" class="myCombos"></select>
  3. <select name="cboThree" id="cboThree" class="myCombos"></select>
So I can obtain all three combos fairly simply by doing:

  1. $(".myCombos");
Which will obviously get me all three. I have an array of values that I initialise into these and they're pretty much identical apart from the first value of the array, which I'd like to make unique to "Select Value x" where x = 0, 1 or 2 based on the combo index. Thus:

  1. var myArr = ['Select Value', 'One', 'Two', 'Three', 'Four'];
  2. var combos = $(".myCombos");

  4. for (var i = 0; i < myArr.length; i++) {
  5.       combos.append(
  6.             $("<option>")
  7.                   .attr("val", i)
  8.                   .text(myArr[i])
  9.       );
  10. }
Which is working for the most part. However, I'd then like to reference each combo box (if possible) so that, I have the following in my loop, something along the lines of:



  1. if (i == 0) { // the first select
  2.       // add the myArr[i] + " " + individual combo-box index for each combo box.
  3. }

Hope that makes sense! So I just need to know whether it's possible to reference individual items from a class selector, in order to achieve what I described above.

Thanks