0

我有一个基于 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"]);
4

2 回答 2

1

最好的方法是遍历每个元素并遍历每个元素的类列表并检查“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
        } 
    });
});

演示在这里。这还包括一种替代方法，该方法剥离每个类的末尾以获得相同的结果

于 2013-08-22T15:29:26.750 回答
1 
$('#grid .span6').toggleClass('span4 span6');

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

您可以在此处阅读有关 toggleClass 方法的更多信息

根据修改后的问题更新：

我认为您提到的交互将涉及具有“跨度”类之一的元素，并且交互是一个 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-20T21:32:54.673 回答