使用jQuery更改模式中的divs类

问题描述

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

我需要将前两个div设为col-md-3（norMAL），然后将接下来的2个div设为col-md-6（WIDE），然后将接下来的4个div设为col-md-3（正常），然后是下2个divs 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);
});

解决方法

这是一个迭代每个div并根据其在pattern数组中的位置选择合适的类的解决方案。它不比您已经拥有的 But 紧凑得多，它的显着优点是，如果您更改{{的数量，则无需手动修复JavaScript 1} s或样式本身。使用这种方法，您只需更改div数组中的项目并立即获得不同的结果即可。

pattern

这是其中的CodePen example。

,

您可以使用.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>

,

使用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);
}

,

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

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>