亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

使用 jQuery 更改模式中的 div 類

使用 jQuery 更改模式中的 div 類

GCT1015 2023-07-20 16:10:02
我正在開發一個博客布局（引導程序），但遇到了障礙。我需要將前兩個 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);});
查看完整描述

4 回答

?
陪伴而非守候

TA貢獻1757條經驗 獲得超8個贊

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


查看完整回答
反對 回復 2023-07-20
?
胡子哥哥

TA貢獻1825條經驗 獲得超6個贊

這是一個解決方案，它迭代每個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;

? ? }

};


查看完整回答
反對 回復 2023-07-20
?
神不在的星期二

TA貢獻1963條經驗 獲得超6個贊

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

}


查看完整回答
反對 回復 2023-07-20
?
慕妹3146593

TA貢獻1820條經驗 獲得超9個贊

這個決定是我做出的。這里涉及到對象和鍵。每個對象（類）都分配有相應的鍵（索引）。


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>



查看完整回答
反對 回復 2023-07-20
  • 4 回答
  • 0 關注
  • 221 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號