Jquery：向每隔一个可见元素添加类答案

【问题标题】：Jquery: Add class to every second visible elementJquery：向每隔一个可见元素添加类
【发布时间】：2019-10-03 20:35:29
【问题描述】：

我正在尝试创建一个动态投资组合库，您可以在其中通过单击类别来隐藏显示项目。除了在单击类别时将类添加到隐藏/显示的元素之外，一切都有效。

我目前有：

$(document).ready(function() {
 $('ul.filter a').click(function() {
  $(this).css('outline','none');
  $('ul.filter .current').removeClass('current');
  $(this).parent().addClass('current');

  var filterVal = $(this).text().toLowerCase().replace(' ','-');

  if(filterVal == 'all') {
   $('div.portfolio .hidden').fadeIn('slow').removeClass('hidden');
  } else {

   $('div.portfolio').each(function() {
    if(!$(this).hasClass(filterVal)) {
     $(this).fadeOut('normal').addClass('hidden');
    } else {
     $(this).fadeIn('slow').removeClass('hidden').addClass("show");

     $('.portfolio:visible').each(function (i) {
      if (i % 2 == 0) $(this).addClass("last"); // This is the part that doesn't seem to work
     });

    }
   });
  }

  return false;
 });
});

似乎是这部分代码有问题：

$('.portfolio:visible').each(function (i) {
                if (i % 2 == 0) $(this).addClass("last");  // This is the part that doesn't seem to work
            });

基本上，我希望将 .last 类添加到我的投资组合列表中的每一秒“可见”项目中。

有人吗？

CSS

/* --------------  Portfolio List  ---------------- */
#portfolio-items {
    font-size: 11px;    
}

#portfolio-items ul, #portfolio-items li {
    list-style:none;    
}
#portfolio-items .portfolio {
    float:left;
    width:265px;
    height:145px;
    margin:0px 60px 50px 0px;
    display:block;
}
#portfolio-items .portfolio .portfolio-client {
    float:left;
    font-size: 11px;
    color: #666;
    text-decoration: none;
}
#portfolio-items .portfolio.last {
    margin-right:0px;   
}
#portfolio-items .portfolio img {
    border:solid 6px #fff;
    -moz-box-shadow: 1px 1px 3px #999; /* Firefox */
    -webkit-box-shadow: 1px 1px 3px #999; /* Safari, Chrome */
    box-shadow: 1px 1px 3px #999; /* CSS3 */
    margin: 0px 0px 5px;

    transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
    -o-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
    -webkit-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */
    -moz-transition: all .3s; /* in Safari, every animatable property triggers an animation in .2s */

    transform-origin: centre; /* in Safari, the origin for transformation */
    -o-transform-origin: centre; /* in Firefox, the origin for transformation */
    -webkit-transform-origin: centre; /* in Safari, the origin for transformation */
    -moz-transform-origin: centre; /* in Firefox, the origin for transformation */
}

#portfolio-items .portfolio img:hover {
    -moz-box-shadow: 1px 1px 6px #999; /* Firefox */
    -webkit-box-shadow: 1px 1px 6px #999; /* Safari, Chrome */
    box-shadow: 1px 1px 6px #999; /* CSS3 */

    transform: scale(1.05);
    -o-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);

    box-shadow: 0px 0px 20px #ccc;
    -o-box-shadow: 0px 0px 20px #ccc;
    -webkit-box-shadow: 0px 0px 20px #ccc;
    -moz-box-shadow: 0px 0px 20px #ccc;
}

.view-project {
    background: url(/themes/cogo/default_site/images/view-project.png) no-repeat right center;
    display: block;
    float: right;
    height: 14px;
    width: 87px;
    padding-right: 20px;
    text-align: right;
}

HTML

<div id="portfolio-items"> 
    <div class="portfolio first cms content-management e-commerce clothing kids shops toys"> 
        <a href="http://ee.dev/portfolio/detail/be-my-bear"> 
            <img src="/images/sized/themes/site_themes/cogo/images/uploads/bemybear-project-254x139.jpg" width="254" height="139" title="Be My Bear" /> 
        </a>
        <a href="http://ee.dev/clients/be-my-bear" class="portfolio-client">Be My Bear</a> 
        <a href="http://ee.dev/portfolio/detail/be-my-bear" class="view-project"><span>View Project</span></a></div> 

    <div class="portfolio last cms content-management business-services"> 
        <a href="http://ee.dev/portfolio/detail/joloda"> 
            <img src="/images/sized/themes/site_themes/cogo/images/uploads/joloda1-254x139.jpg" width="254" height="139" title="Joloda International Ltd" /> 
        </a> 
        <a href="http://ee.dev/clients/joloda-international" class="portfolio-client">Joloda International</a> 
        <a href="http://ee.dev/portfolio/detail/joloda" class="view-project"><span>View Project</span></a></div> 

    <div class="portfolio first buddypress cms content-management wordpress business-services coaching events training"> 
        <a href="http://ee.dev/portfolio/detail/nwwn"> 
            <img src="/images/sized/themes/site_themes/cogo/images/uploads/nwwn-project-254x139.jpg" width="254" height="139" title="NWWN" /> 
        </a> 
        <a href="http://ee.dev/clients/north-wales-womens-network" class="portfolio-client">North Wales Women&#8217;s Network</a> 
        <a href="http://ee.dev/portfolio/detail/nwwn" class="view-project"><span>View Project</span></a></div> 

    <div class="portfolio last e-commerce jewellery shops"> 
        <a href="http://ee.dev/portfolio/detail/italian-world"> 
            <img src="/images/sized/themes/site_themes/cogo/images/uploads/italianworld-254x139.jpg" width="254" height="139" title="Italian World" /> 
        </a> 
        <a href="http://ee.dev/clients/italian-world" class="portfolio-client">Italian World</a> 
        <a href="http://ee.dev/portfolio/detail/italian-world" class="view-project"><span>View Project</span></a></div> 

    <div class="portfolio first cms content-management drupal designers printers"> 
        <a href="http://ee.dev/portfolio/detail/mms-almac"> 
            <img src="/images/sized/themes/site_themes/cogo/images/uploads/mms-project-254x139.jpg" width="254" height="139" title="MMS Almac" /> 
        </a> 
        <a href="http://ee.dev/clients/mms-almac-ltd" class="portfolio-client">MMS Almac Ltd</a> 
        <a href="http://ee.dev/portfolio/detail/mms-almac" class="view-project"><span>View Project</span></a></div> 

    <div class="portfolio last cms content-management charity community training"> 
        <a href="http://ee.dev/portfolio/detail/europe-direct"> 
            <img src="/images/sized/themes/site_themes/cogo/images/uploads/europedirect-project-254x139.jpg" width="254" height="139" title="Europe Direct" /> 
        </a> 
        <a href="http://ee.dev/clients/ectarc" class="portfolio-client">Ectarc</a> 
        <a href="http://ee.dev/portfolio/detail/europe-direct" class="view-project"><span>View Project</span></a></div>     
</div>?

过滤器菜单

<ul class="filter"> 


                                                                    <li class="booking-systems"><a href="http://ee.dev/portfolio/category/booking-systems">Booking Systems</a></li> 



                                                                    <li class="buddypress"><a href="http://ee.dev/portfolio/category/buddypress">Buddypress</a></li> 



                                                                    <li class="cms"><a href="http://ee.dev/portfolio/category/cms">CMS</a></li> 



                                                                    <li class="content-management"><a href="http://ee.dev/portfolio/category/content-management">Content Management</a></li> 



                                                                    <li class="drupal"><a href="http://ee.dev/portfolio/category/drupal">Drupal</a></li> 



                                                                    <li class="e-commerce"><a href="http://ee.dev/portfolio/category/e-commerce">E-Commerce</a></li> 



                                                                    <li class="silverstripe"><a href="http://ee.dev/portfolio/category/silverstripe">Silverstripe</a></li> 



                                                                    <li class="wordpress"><a href="http://ee.dev/portfolio/category/wordpress">Wordpress</a></li> 


                                                                    </ul>

【问题讨论】：

过滤器菜单在哪里？ :) 在发布的 HTML 中没有看到它。
这里是完整的代码pastie.org/1147858

标签： javascript jquery

【解决方案1】：

您需要使用:odd 选择器：

http://api.jquery.com/odd-selector/

不完全确定如何在您的代码中实现它，但可能类似于$('.portfolio:odd') 甚至$('.portfolio:visible:odd')。

稍后我会在 jsfiddle 中尝试一下。

【讨论】：

我更改了脚本，因此每次单击链接时都会删除所有“最后一个”类，然后再向所有奇怪的可见.portfolio 类添加last 类。 jsfiddle.net/29kjT（为清楚起见添加了红色边框，其中有 last 类。此外，each() 不是必需的。
你真是个天才！非常感谢。踢自己一点虽然:)
实际上，它工作不正常。转到您的jsfiddle.net/29kjT 并单击电子商务过滤器，然后单击内容管理。红色边框将出现在左侧而不是右侧。
我知道出了什么问题；显然，在 fadeIn 仍处于活动状态时，最后一个类已被删除/添加。我把它变成了一个回调函数，所以一切都等到所有淡入淡出的元素都完成动画。 jsfiddle.net/29kjT/2

【解决方案2】：

  $("tr:even").addClass("even");
  $("tr:odd").addClass("odd");

会产生类似“斑马条纹”的效果。

【讨论】：

我知道。这不是我要找的。它必须即时应用于可见元素。

【解决方案3】：

那么只是一个小的修改：

 $("tr:visible:even").addClass("even");
 $("tr:visible:odd").addClass("odd");

但是你每次隐藏/取消隐藏任何元素时都必须调用它。而且你还必须在之前删除类。像这样：

$("tr").removeClass("even").removeClass("odd");
$("tr:visible:even").addClass("even");
$("tr:visible:odd").addClass("odd");

我认为你应该很好！

【讨论】：