jQuery查找和替换类名的一部分的所有实例答案

【问题标题】：jQuery Find and Replace all instances of part of a classnamejQuery查找和替换类名的一部分的所有实例
【发布时间】：2016-05-21 01:41:34
【问题描述】：

我有几个类名如下所示的 div：

class="col-md-4"

有些人有：

class="col-md-12"

我想要做的是搜索类末尾的数字并将它们全部替换为：

class="col-md-6"

如何使用 jQuery 做到这一点？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以在 jQuery 中使用特殊的选择器： ^= 以...开头 *= 包含... 或者，如果您没有获得全部选择器，请使用这两个选择器的组合。

var cols = $('[class^="col-md-"]');

然后到remove all classes with a wildcard

cols.removeClass(function (index, css) {
    return (css.match (/(^|\s)col-md-\S+/g) || []).join(' ');
});

然后添加你想要的类：

cols.addClass('col-md-6');

【讨论】：

不可靠，因为它不适用于class="something col-md-4"。
当然是不是。我给你举了一个例子，说明什么时候它不起作用。此外，*= 不是以选择器结尾的。
你是对的 *= 这是“包含”选择器。话又说回来，什么仍然不可靠？
这个解决方案需要特定的类属性结构（col-class 是第一个）。这是不可靠的。
@ShiranDror 我说的是[class^="col-md-"] 选择器。你应该改用[class*="col-md-"]。

【解决方案2】：

你可以像这样使用“包含”选择器

$("[class*='col-md-']").removeClass (function (index, css) {
    return (css.match (/(^|\s)col-md-\S+/g) || []).join(' ');
}).addClass("col-md-6");

基于this answer的removeClass函数

$("[class*='col-md-']")

将找到任何具有包含col-md- 的类的元素。 removeClass 函数将删除它。最后 col-md-6 将被添加。

编辑

如果类属性在 col-md- 之前有另一个类，则将 [class^='col-md-'] 更改为 [class*='col-md-']。感谢@dfsq 指出这一点

【讨论】：

这不只是@TimVermaelen 答案的稍微修改的副本吗？除了蒂姆提前 10 分钟发布了他的帖子？！？！
其实是同一个答案！即使是相同的链接。当我开始写答案时，蒂姆的答案不在那里..

【解决方案3】：

尝试删除类并添加新类：

$(".col-md-4").removeClass("col-md-4").addClass("col-md-6");
$(".col-md-12").removeClass("col-md-12").addClass("col-md-6");

【讨论】：

我需要的有点不同。我需要在不知道班级的最后一个数字的情况下执行此操作，而这正是我想要更改的内容。例如，我只知道这部分：col-md- 但不知道数字。

【解决方案4】：

这也应该有效：

$('[class*=col-md]').removeClass('col-md-4 col-md-12').addClass('col-md-6');

【讨论】：

【解决方案5】：

如果所有这些元素都在主 div 中，您可以使用简单的 javascript 来实现。

例如：

var arr_divs = document.getElementById('main_div').getElementsByTagName('div');

for(var i = 0; i < arr_divs.length; i++){

    if(arr_divs.item(i).className == 'col-md-12' || arr_divs.item(i).className == 'col-md-4'){

        arr_divs.item(i).className = 'col-md-6';
    }   
}

【讨论】：

【解决方案6】：

这可能不是做你想做的最有效的方式，但它保持简单。这是一个有效的小提琴：https://jsfiddle.net/Lns1ob5q/

$("[class^=col-md-]").attr("class", "col-md-6");

上面选择了类包含col-md- ([class^=col-md-]) 的所有元素，并用col-md-6 替换该类，无论后面紧跟什么数字。

我说它效率不高的原因是因为 jQuery 最初会选择已经有 col-md-6 类的元素并用相同的类替换它们的类...但是嘿，它有效！

【讨论】：