正在尝试将类应用于通过jquery筛选的元素

Question

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

我的页面布局使用类"small"one_answers"large"使元素并排显示。我试图让这些元素交替出现，所以模式如下：

1-小型2-大型

3-大4-小

5-小型6-大型

完整列表依此类推。

我试图通过第n个child来解决这个问题，但由于我通过jQuery过滤列表，因此我无法将大小类仅应用于显示的活动(".current")类，因此我最终会在过滤掉div的地方留下很多空白。因此，我试图将其仅应用于列表中的"current"div。

我已经创建了一个不雅的伪解，但我不能无限重复，因为像7、11和19这样的数字不适用于方程。

我已经复制了下面的相关代码来展示我的意思，因为您可以看到底部的div遵循该模式。

：even和：odd也不适用，因为"大"需要应用于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>

Answer 1

我想我明白你想做什么了。你应该能够调整你的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>

Answer 2

如果我是正确的，你有一个小-大-小的模式，每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')
}