jQuery更改项目的多个类名之一答案

【问题标题】：jQuery change one of a number of class names for an itemjQuery更改项目的多个类名之一
【发布时间】：2013-08-23 02:36:32
【问题描述】：

我有一个基于 twitter bootstrap 的动态变化布局。它是一个网格，网格项看起来像这样：

<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）的项目 - 并将其更改为不同的跨度名称（即 span4）。我不一定会提前知道我要更改的跨度名称是什么，我只知道它将以“跨度”开头，之后的所有内容都需要删除并附加新编号。如何在不完全清除类名的情况下在 jQuery 中执行此操作？

换句话说，我需要做一些查找

([class*="span"]);

【问题讨论】：

标签： javascript jquery dom-manipulation classname

【解决方案1】：

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

这将删除span6 类并将span4 类添加到网格内所有具有span6 类的元素

根据修改后的问题更新：

我认为您提到的交互将涉及具有“跨度”类之一的元素，并且交互是一个 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);
}

【讨论】：

我忘了提——我不一定知道 div 的类是 span6。可能是 span1、span4、span12 等。所以我不知道要切换哪个类
在这种情况下，您可能应该重申您的问题，以便可以回答...因为现在我不知道您想要什么：P
@mheavers：我已经更新了答案，但恐怕这个问题仍然很模糊，我可以保证您正在寻找的解决方案，您可能希望在将来当您提出问题时 - 以这种方式为您提供帮助会更容易。

【解决方案2】：

最好的方法是遍历每个元素并遍历每个元素的类列表并检查“span”，如果是则替换类。你可以这样做：

$('.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。这还包括一种替代方法，该方法剥离每个类的末尾以获得相同的结果

【讨论】：