Question

我有一个基于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）。我不一定知道我正在更改的字段名称是提前的，我只知道它将以“span”开头，之后的所有内容都需要删除并附加新号码。如何在不完全清除类名的情况下在jQuery中执行此操作？

换句话说，我需要做某种发现

([class*="span"]);

Answer 1

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

这将删除课程span6并将课程span4添加到网格中span6课程的所有元素

You can read more about the toggleClass method here

根据修订后的问题更新：

我认为你提到的交互将涉及一个带有“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);
}

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

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

2 个答案: