Создать массив с Jquery

Question

У меня есть две функции. Первая функция принимает пользовательский ввод в текстовое поле и добавляет его в div, а затем отображает его в HTML. Второй произнесет изменение в слове от пользователя и изменит фон и цвет слова, таким образом, слово изменит цвет и фон для слова. Первая функция работает нормально, вторая функция, где у меня возникают проблемы. Я раньше не создавал массив с помощью jQuery, поэтому я предполагаю, что с моим синтаксисом что-то не так, потому что мой код работает так, как будто второй функции не было. Какие-либо предложения?

Спасибо

Вот функции

function listWordsUsed(wordUsed) {
    var userTrials = $('#userGuesses');
    var divisor = $("<div>" + wordUsed + "</div>");
    divisor.hide().appendTo(userTrials).fadeIn(7000);
    return;
} //End of function listWordsUsed(wordUsed) 

function addStyleToAnswers(wordUsed) {
    listWordsUsed(wordUsed);
    theGuess = $("div").toArray();
        for (i=0; i< theGuess.length; i++)
        {
            if (i % 2 == 0)
            {
                $("#userGuesses").addClass("oddGuess");
            } //if (i % 2 = 0)
            else
            {
                $("#userGuesses").addClass("evenGuess");
            } //else
        } //for (i=0; i< wordUsed.length; i++)
} //function addStyleToAnswers(wordUsed)

Вот файл CSS для функций

.oddGuesses {
    color: orange;
    background-color: blue;
}

.evenGuesses {
    color: blue;
    background-color:orange;
}

Answer 1

Чтобы перебрать объект jquery, вы можете использовать .each() http://api.jquery.com/each/ Нравится:

function addAnswer (wordUsed) {
  var userTrials = $('#userGuesses');
  var divisor = $('<div class="word">' + wordUsed + '</div>');
  divisor.hide().appendTo(userTrials).fadeIn(7000);
  return;
}

function addStyleToAnswers(wordUsed) {
  $('.word').each(function(index){
    if (index%2 === 0) {
      $(this).addClass('odd')
    } else {
      $(this).addClass('even')
    }
  });
}

addAnswer();
addStyleToAnswers();

Но когда вы просто хотите стилизовать четные или нечетные элементы, вы можете сделать это в CSS сdiv:nth-child(odd) а также div:nth-child(even) по крайней мере, когда вы не заботитесь о IE8