尝试将类应用于通过jquery过滤的元素

时间：2019-01-23 15:12:01

标签： javascript jquery html css

我正在为我的网站创建一个页面，其中元素可以在搜索功能下显示为列表。

页面的布局使用“小”和“大”类使元素并排显示。我正在尝试使这些元素交替出现，因此模式如下：

1-小2-大

3-大4-小

5-小6-大

以此类推，以获取完整列表。

我试图通过nth-child解决这个问题，但是当我通过jQuery过滤列表时，我无法再将大小类应用于仅显示的活动（'.current'）类，因此最终有很多空白，其中div已被过滤掉。因此，我试图将其仅应用于列表中的“当前” div。

我创建了一个不起眼的伪解，但是我不能无限重复此广告，因为像7、11和19这样的数字不适用于这些方程。

我已经在下面复制了相关代码以显示我的意思，因为您可以在模式后的底部停止处看到div。

：even和：odd对此都不起作用，因为需要将'large'应用于2,3,6,7,10,11等。

不确定我是否只是在这里遗漏了一些明显的东西！

$(document).ready(function() {

  if ($('.event-single').hasClass('current')) {
    $('.event-single.current').each(function(index) {
      if ((index + 1) % 3 == 0) {
        $(this).addClass('large').removeClass('small');
      }
    })
    $('.event-single.current').filter(function(index) {
      if ((index + 1) % 2 == 0) {
        $(this).addClass('large').removeClass('small');
      }
    })
    $('.event-single.current').filter(function(index) {
      if ((index + 1) % 7 == 0) {
        $(this).addClass('large').removeClass('small');
      }
    })
    $('.event-single.current').filter(function(index) {
      if ((index + 1) % 11 == 0) {
        $(this).addClass('large').removeClass('small');
      }
    })
    $('.event-single.current').filter(function(index) {
      if ((index + 1) % 18 == 0) {
        $(this).addClass('large').removeClass('small');
      }
    })
    $('.event-single.current').filter(function(index) {
      if ((index + 1) % 4 == 0) {
        $(this).addClass('small').removeClass('large');
      }
    })
    $('.event-single.current').filter(function(index) {
      if ((index + 1) % 9 == 0) {
        $(this).addClass('small').removeClass('large');
      }
    })
  }
});
.event-info {
  background-color: blue;
  height: 300px;
}

.large {
  width: 60%;
  height: 350px;
  float: left;
  border: 2px solid #fff;
  border-radius: 50px
}

.small {
  width: 37%;
  height: 350px;
  float: left;
  border: 2px solid #fff;
  border-radius: 50px
}

.list-of-events-inner {
  overflow: hidden
}

.event-single:not(.current) {
  display: none;
}

.event-single .hero-post-mini-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">

  <div class="list-of-events-inner" id="list-of-hotels-inner">

    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>

2 个答案:

答案 0 :(得分：2)

我想我明白了您要做什么。您应该只能够调整Javascript-查看索引mod 4，然后如果我理解正确的话，则希望0和3变小。

$(document).ready(function() {
  $('.event-single.current').each(function(num, elem) {
    var mod = num % 4;
    if (mod === 0 || mod === 3) {
      $(elem).addClass('small').removeClass('large');
    } else {
      $(elem).addClass('large').removeClass('small');
    }
  });
});
.event-info {
  background-color: blue;
  height: 300px;
}

.large {
  width: 60%;
  height: 350px;
  float: left;
  border: 2px solid #fff;
  border-radius: 50px
}

.small {
  width: 37%;
  height: 350px;
  float: left;
  border: 2px solid #fff;
  border-radius: 50px
}

.list-of-events-inner {
  overflow: hidden
}

.event-single:not(.current) {
  display: none;
}

.event-single .hero-post-mini-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">

  <div class="list-of-events-inner" id="list-of-hotels-inner">

    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>
    </div>
    <div class="event-single current small">
      <div class="event-info">
      </div>

答案 1 :(得分：0)

如果我是对的，您可以使用一种由小到大，由大到小的模式，每4个项目重复一次。一个相当简单的解决方案是遍历所有匹配的div，并使用4的索引对它们按照4组中的索引进行样式设置。

例如

var events = $('.current');
for(var i = 0; i < events.length; i++)
{
  if(i % 4 == 0 || i % 4 == 3)
    events[i].addClass('small').removeClass('large')
  else
    events[i].addClass('large').removeClass('small')
}
相关问题
最新问题