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

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

我的页面布局使用“小”和“大”类来使元素并排显示。我试图让这些元素交替出现，所以模式如下:

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>

最佳答案

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

关于javascript - 尝试将类应用于通过 jquery 过滤的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54330275/

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

上一篇：javascript - 在每次按键时触发 React Native TextInput onSubmitEditing

下一篇：javascript - 为什么我的双引号作为单引号收到？