Question

Despite almost completely copying this filtering demo, I still can’t get the the plugin to remove the .selected class from the current element and add it to the one being clicked.

The current result is that the items do filter, but the .selected class remains assigned to <li><a href="#videos" data-filter="*" class="selected">All</a></li>.

HTML

<ul class="category_navigation option-set" data-option-key="filter"> 
    <li><a href="#videos" data-filter="*" class="selected">All</a></li>
    <li><a href="#videos" data-filter=".feature">Feature</a></li>
    <li><a href="#videos" data-filter=".commercial">Commercial</a></li>
    <li><a href="#videos" data-filter=".music_video">Music Video</a></li>
    <li><a href="#videos" data-filter=".trailer-promo">Trailer/Promo</a></li>
    <li><a href="#videos" data-filter=".digital">Digital</a></li>
</ul>

Javascript

// cache container
var $container = $('.videos');
// initialize isotope
$container.isotope({
});

// filter items when filter link is clicked
$('[href="#videos"]').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ filter: selector });
  return false;
});

Item HTML sample

<li class="trailer-promo">
    <a href='http://player.vimeo.com/video/55078437?autoplay=1' 
        class='lightview' 
        data-lightview-group='trailer/promo'
        data-lightview-type='iframe' 
        data-lightview-title="KUNG FU PANDA 2"
        data-lightview-caption="20 Intl.<br>Dir: Dreamworks/Aspect Ratio"
        data-lightview-options="width: 796, height: 447, viewport: 'scale'">
        <img src="img/video_thumbs/TRAILER_KUNG-FU-PANDA_2.jpg" alt="">
        <p>KUNG FU PANDA 2</p>
    </a>
</li>

<li class="feature">
    <a href='http://player.vimeo.com/video/16129275?autoplay=1' 
        class='lightview' 
        data-lightview-group='feature'
        data-lightview-type='iframe' 
        data-lightview-title="RAY CHARLES AMERICA"
        data-lightview-caption="Client: Tremolo Productions<br>Dir: Alexis Spraic"
        data-lightview-options="width: 796, height: 447, viewport: 'scale'">
        <img src="img/video_thumbs/FEATURE_RAY-CHARLES-AMERICA.jpg" alt="">
        <p>RAY CHARLES AMERICA</p>
    </a>
</li>

<li class="commercial">
    <a href='http://player.vimeo.com/video/28387434?autoplay=1' 
        class='lightview' 
        data-lightview-group='commercial'
        data-lightview-type='iframe' 
        data-lightview-title="VIEWDLE"
        data-lightview-caption="Third Eye<br>Dir: Blake & Nic"
        data-lightview-options="width: 796, height: 447, viewport: 'scale'">
        <img src="img/video_thumbs/COMMERCIAL_THIRD-EYE.jpg" alt="">
        <p>VIEWDLE</p>
    </a>
</li>

Answer 1

I don’t see any code in there to actually remove the class. I don’t know anything about that plugin, but you could just do something like this:

$(".selected").removeClass("selected"); 

and add the class back to whatever element you need/want it attached to.