使用jQuery更改模式中div的类

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

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

我已经尝试过[这个方法在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);
});

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

这里有一个解决方案，它遍历每个div，并根据其在pattern数组中的位置选择适当的类。它并没有比你已经拥有的紧凑得多，但它的显著优势是，如果你改变div的数量或模式本身，就不需要手动修复JavaScript。使用这种方法，您可以简单地更改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的例子。

使用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>

相关内容

最新更新

热门标签：