I want to set the current state to selected when clicking on each link. I can do this by:

<ul class="places">
    <li class="selected">
       <a href="javascript:void(0)" onclick="myClick(0);">
          <span class="date">Saturday November 2, 2013</span>
          <span class="time">10am – 12pm</span>
          <span class="location">Western Sydney Parklands</span>
       </a>
    </li>
    <li>
       <a href="javascript:void(0)" onclick="myClick(1);">
          <span class="date">Saturday November 9, 2013</span>
          <span class="time">10am – 12pm</span>
          <span class="location">Bankstown High School</span>
       </a>
    </li>
    <li>
       <a href="javascript:void(0)" onclick="myClick(2);">
          <span class="date">Tuesday November 12, 2013</span>
          <span class="time">9am – 11am</span>
          <span class="location">Greystanes Park</span>
       </a>
    </li>
</ul>

$(document).ready( function() {
    $('.places li a').click( function() {
       $('.places li').removeClass('selected');
       $(this).parent().addClass('selected');
    });
});

But this will double triggering onclick event an each link because the calling function myClick() is called to push data to map. Then I decided to implement these in the myClick() function:

function myClick( id ) {
    google.maps.event.trigger(markers[id], 'click');
    $('.places li').removeClass('selected');
    $(this).parent().addClass('selected');
}

The problem is that I cannot use $(this) to add class to its parent li. See what I have tried here.

Any help would be very much appreciated. Thanks!