使用 jQuery 更改模式中 div 的 class

Question

我有一个正在处理的博客布局 (bootstrap)，但遇到了障碍。

我需要前两个 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);
});

Answer 1

使用text方法获取当前元素的内容

$("#blog div").each(function(i) {
    var newClass = 'col-md-3 red';
    var text = $(this).text();
    if (text == "Wide") {
        newClass = 'col-md-6 blue';
    }
    $(this).addClass(newClass);
}

Answer 2

这是一个循环遍历每个 div 并根据其在 pattern 数组中的位置选择适当的 class 的解决方案。它并没有比你已经拥有的更紧凑但是它有一个显着的优势，如果你改变数字不需要你手动修复你的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 example 的实际效果。

Answer 3

您可以使用 .not() 和 .filter()

$('#blog div').addClass('col-md-3 red')         // add red class to all the divs
  .not(':lt(2)')                                // exclude the first two Normal elements
  .filter(function(i){                          // filter to get the Wide elements
    return (i % 6 == 0) || ( (i % 6) - 1 == 0)  // filter every 6 element and the element next of it
  }).addClass('col-md-6 blue');                 // add the class to the Wide elements

.red{
  background : red;
}
.blue{
  background : blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 4

这个决定是我做的。这里涉及对象和键。每个对象 (class) 都分配有相应的键（索引）。

let obj = {
  "col-md-3": [1, 2, 5, 6, 7, 8, 11, 12, 13, 14, 17, 18, 19, 20, 23, 24, 25, 26, 29, 30, 31, 32, 35, 36],
  "col-md-6": [3, 4, 9, 10, 15, 16, 21, 22, 27, 28, 33, 34]
}

let objKeys = Object.keys(obj),
    objValues = Object.values(obj);

let nodes = document.querySelectorAll("#blog div");

for (var i = 0; i < nodes.length; i++) {            
    let index = objValues.findIndex(id => id.indexOf(i + 1) > -1)
    
    if (index > -1) {
        nodes[i].classList.add(objKeys[index]);
    }
}

$(nodes).each(function(i) {
  $(this).addClass(obj[i]);
});

.col-md-3, 
.col-md-6 {
  border: 1px solid green;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row" id="blog">
    <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 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 更改模式中 div 的 class

Changing the class of divs in a pattern using jQuery

html

javascript

css

jquery

algebra