2

I have several div's with a classname that looks like this:

class="col-md-4"

some have:

class="col-md-12"

What I want to do is to search for whatever the number at the end of the class is and replace all of them to:

class="col-md-6"

How can I do this using jQuery?

6 Answers6

3

You can use special selectors in jQuery: ^= starts with ... *= contains ... Or use a combination of both selectors if you don't get them all.

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

Then to remove all classes with a wildcard

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

Then add the class you want:

cols.addClass('col-md-6');
Community
  • 1
  • 1
Tim Vermaelen
  • 6,869
  • 1
  • 25
  • 39
  • Not reliable, as it will not work for `class="something col-md-4"`. – dfsq May 20 '16 at 14:45
  • Of course it's **not**. I gave you an example of when it will not work. Moreover, `*=` is not ends-with selector. – dfsq May 20 '16 at 15:06
  • You're right about the `*=` which is "contains" selector. Then again, what is still *not* reliable? – Tim Vermaelen May 20 '16 at 15:28
  • This solution expects specific structure for class attribute (col- class to be the first). And this is not reliable. – dfsq May 20 '16 at 15:31
  • "Or use a combination of both selectors if you don't get them all." ... I'm done with this now. – Tim Vermaelen May 20 '16 at 15:32
  • @dfsq it works even when its not the first. its global match. you can test it yourself https://regex101.com/ – Shiran Dror May 20 '16 at 16:07
  • 1
    @ShiranDror I was talking about `[class^="col-md-"]` selector. You should use `[class*="col-md-"]` instead. – dfsq May 20 '16 at 16:37
1

Try to remove the class and add the new one:

$(".col-md-4").removeClass("col-md-4").addClass("col-md-6");
$(".col-md-12").removeClass("col-md-12").addClass("col-md-6");
ADreNaLiNe-DJ
  • 4,787
  • 3
  • 26
  • 35
  • What I need is a bit different. I need to do this without knowing the last number of the class, just what I want to change it to. For example, I would just know this part: col-md- but not the number. –  May 20 '16 at 14:29
0

This should also work:

$('[class*=col-md]').removeClass('col-md-4 col-md-12').addClass('col-md-6');
dfsq
  • 191,768
  • 25
  • 236
  • 258
0

you can use "contains" selector like this

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

removeClass function based on this answer

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

will find any element with a class that contains col-md-. The removeClass function will than remove it. And finally col-md-6 will be added.

EDIT

changed [class^='col-md-'] to [class*='col-md-'] in case class attribute has another class before col-md-. Thank you @dfsq for pointing this out

Community
  • 1
  • 1
Shiran Dror
  • 1,472
  • 1
  • 23
  • 36
0

You could do it with simple javascript if all of those elements were inside a main div.

For example:

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';
    }   
}
cthefinal
  • 79
  • 1
0

This may not be the most efficient way of doing what you want but, it keeps it simple. Here's a working fiddle: https://jsfiddle.net/Lns1ob5q/

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

The above selects all elements with a class containing col-md- ([class^=col-md-]) and replaces the class, regardless of what number immediately follows, with col-md-6.

The reason I say it's not efficient is becuase jQuery will initially pick up elements that already have a class of col-md-6 and replace their class with the same one... But hey, it works!

David Wilkinson
  • 5,060
  • 1
  • 18
  • 32