Change a div class if li selected

Question

I have a webpage with a prettyphoto gallery.Each images thumbnail has a different colored overlay(When you hover over the image). I have 4 categories and for each category there is a different thumbnail overlay color and that is fine.

But I also have a 5th category where all the images from the gallery are displayed and here i want another color for the thumbnail overlay for all images.

Here is the html for selecting the categories:

<div class="gallerySelector">
        <ul class="gallerySelectorList">
            <li class="current"><a data-filter="article.portfolio" href="#">All</a></li>
            <li><a data-filter="article.portfolio[data-category~='grafica']" href="#">Grafica</a></li>
            <li><a data-filter="article.portfolio[data-category~='gravura']" href="#">Gravura</a></li>
            <li><a data-filter="article.portfolio[data-category~='pictura']" href="#">Pictura</a></li>
            <li><a data-filter="article.portfolio[data-category~='desen']" href="#">Desen</a></li>
        </ul>
    </div>

And this is how I call in the images:

  <section class="portfolio_container">

        <article class="portfolio" data-category="grafica">
            <section class="thumbImage">
                <img src="images/gallery/afirmarea-thumb.jpg" alt="" class="fullwidth">
                <div class="grafica-wrap">
                    <div class="thumbText">
                        <h3 class="sectionTitle">Afirmarea</h3>
                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
                        <a class="thumbLink" href="images/gallery/afirmarea.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
                    </div>
                </div>
            </section>
        </article>

Is it possible with jquery to change the <div class="grafica-wrap">(this adds the thumbnail overlay and i have one for each menu item[category] with a different one when this is active:

<li class="current"><a data-filter="article.portfolio" href="#">All</a></li>

Answer 1

I would suggest using id "all", to make sure that it doesn't happen on clicking another element with class current.

<li class="current" id="all"><a data-filter="article.portfolio" href="#">All</a></li>

Now if you meant clicking by selecting,

Detect if all is clicked, and change class of all elements with class gravura-wrap or grafica-wrap or pictura-wrap or desen-wrap, to other-class.

$("#all").click(function(){
    $(".gravura-wrap, .grafica-wrap, .pictura-wrap, .desen-wrap").removeClass().addClass("other-class");
});

Hope this helps, if it doesn't let me know if I got you wrong.

Answer 2

use as this

$('.grafica-wrap').removeClass('grafica-wrap').addClass('your-class');

Answer 3

Following your comment :

I have

'grafica-wrap','desen-wrap','pictura-wrap','gravura-wrap'

and I want to change to another class only if :

<li class="current"><a data-filter="article.portfolio" href="#">All</a></li>

---

Try it this way :

$('.grafica-wrap, .desen-wrap, .pictura-wrap, .gravura-wrap').filter('.current').each(function() {

     if($(this).find("a").data("filter") == "article.portfolio") $(this).removeClass().addClass('your-class');
});

Totally untested.