第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

使用 jQuery 更改模式中的 div 類

使用 jQuery 更改模式中的 div 類

GCT1015 2023-07-20 16:10:02
我正在開發(fā)一個(gè)博客布局（引導(dǎo)程序），但遇到了障礙。我需要將前兩個(gè) div 設(shè)置為 col-md-3 （正常），然后將后面的 2 個(gè) div 設(shè)置為 col-md-6 （寬），然后需要將接下來的 4 個(gè) div 設(shè)置為 col-md-3 （正常），然后接下來的 2 個(gè) div col-md-6(WIDE) 等等。我已經(jīng)嘗試過[codepen中的這個(gè)方法][1]，它可以工作（下面的代碼），但顯然不是最有效的方法 - 我對 jQuery 相當(dāng)陌生，所以非常感謝您能提供的任何幫助！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貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊

你可以使用.not()和來做到這一點(diǎn).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>


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

TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超6個(gè)贊

這是一個(gè)解決方案，它迭代每個(gè)divs 并根據(jù)其在pattern數(shù)組中的位置選擇適當(dāng)?shù)念?。它并不比您已?jīng)擁有的更緊湊，但JavaScript它具有顯著的優(yōu)點(diǎn)，即如果您更改 s 的數(shù)量div或模式本身，則不需要您手動修復(fù)。使用這種方法，您可以簡單地更改數(shù)組中的項(xiàng)目pattern并立即獲得不同的結(jié)果。


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;

? ? }

};


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

TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊

使用該text方法獲取當(dāng)前元素的內(nèi)容。


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

}


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

TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超9個(gè)贊

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


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>



查看完整回答
反對 回復(fù) 2023-07-20
  • 4 回答
  • 0 關(guān)注
  • 235 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號