时间戳

首页 > 解决方案 > 使用 jQuery 更改模式中的 div 类

javascript - 使用 jQuery 更改模式中的 div 类

问题描述

我有一个正在处理的博客布局（引导程序），但遇到了障碍。

我需要前两个 div 为 col-md-3 (NORMAL)，然后是以下 2 个 div col-md-6 (WIDE)，然后需要将接下来的 4 个 div 设置为 col-md-3 (NORMAL)，然后接下来的 2 个 div col-md-6(WIDE) 依此类推，依此类推。

我已经尝试过 [codepen 中的这种方法] [1]，它可以工作（下面的代码）但显然不是最有效的方法 - 我对 jQuery 相当陌生，所以非常感谢您提供的任何帮助！

HTML：

  <div class="container">
  <div class="row" id="blog">
    <div>Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
    <div class="">Wide</div>
    <div class="">Wide</div>
    <div class="">Normal</div>
    <div class="">Normal</div>
  </div>
</div>

使用的 jQuery：

$("#blog div").each(function(i) {
var newClass = 'col-md-3 red';
if (i == 2) newClass = 'col-md-6 blue';
if (i == 3) newClass = 'col-md-6 blue';
if (i == 8) newClass = 'col-md-6 blue';
if (i == 9) newClass = 'col-md-6 blue';
if (i == 14) newClass = 'col-md-6 blue';
if (i == 15) newClass = 'col-md-6 blue';
if (i == 20) newClass = 'col-md-6 blue';
if (i == 21) newClass = 'col-md-6 blue';
if (i == 26) newClass = 'col-md-6 blue';
if (i == 27) newClass = 'col-md-6 blue';
if (i == 32) newClass = 'col-md-6 blue';
if (i == 33) newClass = 'col-md-6 blue';
$(this).addClass(newClass);
});

标签： javascripthtmljquerycssalgebra

解决方案

这是一个解决方案，它遍历每个divs 并根据其在pattern数组中的位置选择适当的类。它并不比您已经拥有的紧凑得多，但JavaScript它具有显着优势，即如果您更改divs 的数量或模式本身，则不需要您手动修复。使用这种方法，您可以简单地更改pattern数组中的项目并立即获得不同的结果。

elements = $("#blog").children();
pattern = ['col-md-3','col-md-3',
          'col-md-6','col-md-6',
          'col-md-3', 'col-md-3'];
  pattern_val = 0;
  for (var i=0;i<elements.length;i++) {
    if (pattern_val < 6) {
      $(elements[i]).addClass(pattern[pattern_val]);
      pattern_val += 1;
    }
    else {
      pattern_val = 0;
      $(elements[i]).addClass(pattern[pattern_val]);
      pattern_val += 1;
    }
};

这是它的一个CodePen 示例。

推荐阅读