title: Add a CSS class to a single element in an array
body: <p>I am trying to add a class to an array element, which is a specific character, upon the keypress of that character. The expected outcome is that if the key &quot;y&quot; is pressed, the class &quot;selected&quot; will be added only to the &quot;y&quot; in the array, which will change it's color and strike a line through it.</p>
  <p>I have a keypress event set up and I can add the class to the entire div where the array has been appended upon keypress, but I cannot figure out how to add the class to a single element in the array upon the keypress of that character.</p>
  <hr />
  <h3>My JS code:</h3>
  <pre><code>var $arr = &quot;a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 &quot;.split(&quot;&quot;);
  
  $('#characters').append($arr);
  $(document).keypress(function(event) {
    var pressed = event.keyCode;
    var alreadyPressed = [];
    var pressedChar = String.fromCharCode(pressed);
    console.log(pressedChar, pressed);
    for (i = 0; i &lt;= $arr.length; i++) {
      var arrCharacter = $arr[i];
      if((arrCharacter === pressedChar) &amp;&amp; (jQuery.inArray(pressed, alreadyPressed) === -1)) { 
            $(this).addClass(&quot;selected&quot;);
              alreadyPressed.push(pressed); 
          } 
    }
  })
  </code></pre>
  <p><a href="https://jsfiddle.net/minditorrey/1xjg9z24/" rel="nofollow noreferrer"><strong>Here</strong></a> is also a Fiddle.</p>