使用 jQuery 更改模式中的 div 类

Question

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

我需要将前两个 div 设置为 col-md-3 （正常），然后将后面的 2 个 div 设置为 col-md-6 （宽），然后需要将接下来的 4 个 div 设置为 col-md-3 （正常），然后接下来的 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

你可以使用.not()和来做到这一点.filter()$('#blog div').addClass('col-md-3 red')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// add red class to all the divs&nbsp; .not(':lt(2)')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // exclude the first two Normal elements&nbsp; .filter(function(i){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // filter to get the Wide elements&nbsp; &nbsp; return (i % 6 == 0) || ( (i % 6) - 1 == 0)&nbsp; // filter every 6 element and the element next of it&nbsp; }).addClass('col-md-6 blue');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// add the class to the Wide elements.red{&nbsp; background : red;}.blue{&nbsp; background : blue;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">&nbsp; <div class="row" id="blog">&nbsp; &nbsp; <div>Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; </div></div>

Answer 2

这是一个解决方案，它迭代每个divs 并根据其在pattern数组中的位置选择适当的类。它并不比您已经拥有的更紧凑，但JavaScript它具有显着的优点，即如果您更改 s 的数量div或模式本身，则不需要您手动修复。使用这种方法，您可以简单地更改数组中的项目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;    }};

Answer 3

使用该text方法获取当前元素的内容。$("#blog div").each(function(i) {&nbsp; &nbsp; var newClass = 'col-md-3 red';&nbsp; &nbsp; var text = $(this).text();&nbsp; &nbsp; if (text == "Wide") {&nbsp; &nbsp; &nbsp; &nbsp; newClass = 'col-md-6 blue';&nbsp; &nbsp; }&nbsp; &nbsp; $(this).addClass(newClass);}

Answer 4

这个决定是我做出的。这里涉及到对象和键。每个对象（类）都分配有相应的键（索引）。let obj = {&nbsp; "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],&nbsp; "col-md-6": [3, 4, 9, 10, 15, 16, 21, 22, 27, 28, 33, 34]}let objKeys = Object.keys(obj),&nbsp; &nbsp; objValues = Object.values(obj);let nodes = document.querySelectorAll("#blog div");for (var i = 0; i < nodes.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; let index = objValues.findIndex(id => id.indexOf(i + 1) > -1)&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; if (index > -1) {&nbsp; &nbsp; &nbsp; &nbsp; nodes[i].classList.add(objKeys[index]);&nbsp; &nbsp; }}$(nodes).each(function(i) {&nbsp; $(this).addClass(obj[i]);});.col-md-3,&nbsp;.col-md-6 {&nbsp; 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">&nbsp; <div class="row" id="blog">&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Wide</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; &nbsp; <div class="">Normal</div>&nbsp; </div></div>