使用 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')         // 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 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) {

    var newClass = 'col-md-3 red';

    var text = $(this).text();

    if (text == "Wide") {

        newClass = 'col-md-6 blue';

    }

    $(this).addClass(newClass);

}

Answer 4

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

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>