Quero adicionar uma classe em um link de uma lista, eu consegui, porém quero remover a classe quando clico em outro link da mesma lista, e que a classe permaneça somente no link clicado. adicionar eu adiciono porém quando clico em outro link, o link clicado anteriormente permanece com a classe. O que estou fazendo de errado???
HTML
<li class="list-group-item">
<a onclick="requestFile(this.id)" id="{{ content.id}}">
<!--Colocar o status do log-->
<span class=""></span>
<!--Colocar o status do log-->
<div class="media">
<div class="media-left">
<img class="icon-son-play" src="{% static "img/icons/play-gray.png" %}" alt="">
</div>
<div class="media-body">
<h4 class="media-heading">{{ content.name}}</h4>
{{ content.description}}
</div>
</div>
</a>
JQuery
$(document).on('click', '.page_video_content ul li a', function() {
$('.page_video_content ul li a span').removeClass('started');
$('span', this).addClass('started');
if($('span.started', this)) {
$('span.started', this).css({
'background': '#f3c03d'
}).text("Assistindo");
}
});
if($('span.started', this)) {
vai sempre dar verdadeiro. Deves usar.length
para saber se uma coleção jQuery está vazia ou não.