jQuery更改項目的許多類名稱之一

我有一個基於twitter引導動態更改佈局。這是一個網格，看起來像這樣網格項目：jQuery更改項目的許多類名稱之一

<div id="grid"> 
    <div class="row"> 
    <div class="span12 red"/> 
    </div> 
    <div class="row"> 
    <div class="span6 yellow"/> 
    <div class="span6 green"/> 
    </div> 

</div>

根據用戶交互，我需要能夠找到具有一定跨度類項目（即span6） - 和它更改爲不同span名稱（即span4）。我不一定知道我要改變的span名稱是什麼，我只知道它將以「span」開始，並且之後的所有內容都需要刪除並附加新的數字。如何在jQuery中完成此操作，而無需完全清除類名稱？

換句話說，我需要做某種找到

([class*="span"]);

來源

2013-08-20 mheavers

要做到這一點是通過每個元素進行迭代，並通過每個元素的類列表進行迭代，並檢查「跨度」最好的辦法，替代類，如果這樣。你可以這樣做：

$('.row div').each(function() { 
    var $object = $(this); 
    $($(this).attr('class').split(' ')).each(function (i) { 
     // If you want particular span classes to become new classes 
     if(this.toString().indexOf("span3") >= 0) { 
      $object.removeClass(this.toString()); 
      $object.addClass('special'); // New class to be added 
     } 
     // If you want all classes with "span" in them to become a new class 
     else if (this.toString().indexOf("span") >= 0) { 
      $object.removeClass(this.toString()); 
      $object.addClass('span1'); // New class to be added 
     } 
    }); 
});

Demo here。這還包括一個替代方法，去除每個類的結尾以獲得相同的結果

來源

2013-08-22 15:29:26

是的 - 很好，謝謝！ – mheavers

$('#grid .span6').toggleClass('span4 span6');

這將刪除類span6和類span4與span6類添加到所有元素的網格內

根據修訂後的問題更新：

我認爲你提到的交互會涉及一個元素與一個「span」類，並且交互是一個jQuery事件 - 我不知道，因爲這個問題太模糊了，但是通過這些假設，下面應該工作：

function interactionHandler(e) { 
var newSpanName = '<put the span name you wish to switch to here>', 
    spanName = this.className.replace(/(?:^|.*\s)(span\d)\(?:s.*|$)/,''); 

$('#grid .'+spanName).toggleClass(newSpanName + ' ' +spanName); 
}

來源

2013-08-20 21:32:54

我忘了提及 - 我不一定知道div的類是span6。它可能是span1，span4，span12等等。所以我不知道哪個類切換 – mheavers

在這種情況下，你應該重申你的問題，以便它可以被回答...因爲現在我不知道它是什麼你想要：P –

查看修訂更新的問題 – mheavers

jQuery更改項目的許多類名稱之一

回答

相關問題