我不确定你是否有这个想法，但通过应用以下选择器:

I'm not sure if you had this in mind, but by applying the following selector:

$('div.portfolio-item:visible:first').addClass("first-item"); 

您可以为第一个可见 div 添加类:first-item(使用类 portfolio-item)，可用于为第一个应用特殊样式分区.我在这个 answer 中发现了 :visible 选择器的用处.

You can add the class: first-item for the first visible div (with class portfolio-item), that can be used to apply special styles for the first div. I discovered the usefulness of :visible selector at this answer.

$checkboxes.change 函数中总共添加了两行代码:

Altogether, two lines of code have been added into $checkboxes.change function:

 $('div.portfolio-item').removeClass("first-item");

 $('div.portfolio-item:visible:first').addClass("first-item");

第一行只是清除之前的first-item选择.

The first line just clears the previous first-item selection.

小提琴