Javascript 使用jQuery更改模式中的div类

我有一个博客布局我正在工作（引导），我遇到了一个障碍

我需要前两个div是col-md-3（正常），然后是接下来的2个div col-md-6（宽），然后它需要将下4个div作为col-md-3（正常），然后是下2个div col-md-6（宽），依此类推

我已经尝试过[codepen中的这个方法][1]，它可以工作（下面的代码），但显然不是最有效的方法-我对jQuery还比较陌生，所以如果您能提供任何帮助，我将不胜感激

HTML:

---

使用

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

---

下面是一个迭代每个

div

s并根据其在

模式

数组中的位置选择适当类的解决方案。它并不比您已经拥有的要紧凑得多，但它有一个显著的优点，即如果您更改

div

s的数量或模式本身，就不需要手动修复

JavaScript

。使用这种方法，您可以简单地更改

模式

数组中的项，并立即获得不同的结果

elements=$（“#blog”）.children（）；
模式=['col-md-3'，'col-md-3'，
‘col-md-6’，‘col-md-6’，
‘col-md-3’、‘col-md-3’]；
模式值=0；
对于（var i=0；i您可以使用
.not（）
和
.filter（）


$（'#blog div'）.addClass（'col-md-3 red'）//将red类添加到所有div
.not（'：lt（2）//排除前两个正常元素
.filter（函数（i）{//filter以获取宽元素
return（i%6==0）| |（（i%6）-1==0）//过滤每6个元素及其下一个元素
}).addClass（'col-md-6 blue'）；//将类添加到宽元素中
.red{
背景：红色；
}
蓝先生{
背景：蓝色；
}

正常的
正常的
宽阔的
宽阔的
正常的
正常的
正常的
正常的
宽阔的
宽阔的
正常的
正常的
正常的
正常的
宽阔的
宽阔的
正常的
正常的
正常的
正常的
宽阔的
宽阔的
正常的
正常的
正常的
正常的
宽阔的
宽阔的
正常的
正常的
正常的
正常的
宽阔的
宽阔的
正常的
正常的
这是我的决定。这里涉及对象和键。每个对象（类）都分配了相应的键（索引）


让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]
}
设objKeys=Object.keys（obj），
objValues=对象值（obj）；
让节点=document.queryselectoral（#blog div”）；
对于（var i=0；iid.indexOf（i+1）>-1）
如果（索引>-1）{
节点[i].classList.add（objKeys[index]）；
}
}
$（节点）。每个（功能（i）{
$（this.addClass（obj[i]）；
})；
.col-md-3，
.col-md-6{
边框：1px纯绿色；
}

正常的
正常的
宽阔的
宽阔的
正常的
正常的
正常的
正常的
宽阔的
宽阔的
正常的
正常的
正常的
正常的
宽阔的
宽阔的
正常的
正常的
正常的
正常的
宽阔的
宽阔的
正常的
正常的
正常的
正常的
宽阔的
宽阔的
正常的
正常的
正常的
正常的
宽阔的
宽阔的
正常的
正常的
您在问题中描述的模式似乎与代码中的模式不匹配。从
html
中可以看出，您希望
div
遵循以下模式：正常、宽、宽、正常、正常、正常。此模式中有六个元素，您希望重复此模式，直到耗尽
中的所有div>#blog div
。这是你想要的东西的准确摘要吗？Epic，非常感谢-这正是我需要的！
$("#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);
});

$("#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);
}