Inside .each() function jQuery

Question

I've got this

<div id=results">
    <article>
        <span class="sel">Text Here</span>
    </article>
    <article>
        <span class="sel">Text Here</span>
    </article>
    <article>
        <span class="sel">Text Here</span>
    </article>
</div>

Got a jQuery to know wich "span" I've clicked:

$("#results").on('click', 'article .sel', function() {
    var index = $(this).index("#results article .sel");
});

If I would like to change that "span" class, how I could do it?

I thought about doing an .each() function for each "article", but I wouldn't know how to enter the "span" inside the .each() function.

May there is an easier way that I don't know.

Thanks for all.

Answer 1

The clicked element is referenced by this so

$("#results").on('click', 'article .sel', function() {
    var index = $(this).index("#results article .sel");
    //to change the class
    $(this).addClass('newclass');//or do something
});

Answer 2

Just use removeClass() and addClass() (or even toggleClass()) to change the class of an element.

$(".sel").on("click", function()
{
    $(this).removeClass("sel").addClass("yournewclass");
});