Question

我有几个div，其类名如下：

class="col-md-4"

有些人：

class="col-md-12"

我想要做的是搜索课程末尾的数字，并将所有数字替换为：

class="col-md-6"

如何使用jQuery执行此操作？

Answer 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');

Answer 2

尝试删除该类并添加新类：

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

Answer 3

这也应该有效：

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

Answer 4

你可以使用＆＃34;包含＆＃34;像这样的选择

$("[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 ^ =＆＃39; col-md - ＆＃39;]更改为[class * =＆＃39; col-md - ＆＃39;] - 。感谢@dfsq指出这个

Answer 5

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

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

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

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

Answer 6

如果所有这些元素都位于主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';
    }   
}

jQuery查找并替换类名的一部分的所有实例

6 个答案:

修改