title: What is the easiest way to select a list-item in a html list with jquery or javascript?
body: <p>I am busy writing a javascript/jquery based version of the game Battleship. In my overview-screen I have a list of games. What I would like to do, is that every time when I select (click on) a list-item, the background-color of the list-item changes and the selected item is saved in a variable and when I select another list-item that item will be selected and the background-color of the previous selected item will change back to normal. There is only one problem, I could not find an efficient way to change the background-color and save the list-item to a var. Currently I am trying to do it this way but that does not feel right.</p>
  
  <pre><code>this.setListenerForElementsInGameList = function() {
      $('#game-list li').each(function(){
          this.click(this.event_selectGameFromList);
      });
  }
  
  this.event_selectGameFromList = function() {
      $('#game-list li').each(function(){
          this.css("background-color", "#39B7CD");
      });
      this.css("background-color", "#FFFFFF")
  }
  </code></pre>
  
  <p>Sadly it does not work yet, but I would like to hear if I am heading in the right direction with how my code is looking so far or if there is an easier, cleaner and more efficient way of doing it.</p>
  
  <p>All help will be appreciated.</p>
  
  <p>PS. This is the current layout of my game-overview: " <a href="http://i.imgur.com/ujF6Ys9.png" rel="nofollow">http://i.imgur.com/ujF6Ys9.png</a> "</p>