jQuery addClass example

Change class name on click in jQuery

by josekerekes

HTML

<div class="box col-lg-6 col-md-6 col-sm-12 col-xs-12">
  box1
</div>
<div class="box col-lg-4 col-md-4 col-sm-12 col-xs-12">
  box2box1boxbox1box1
</div>
<div class="box col-lg-4 col-md-4 col-sm-12 col-xs-12">
  box3
</div>
<div class="box col-lg-4 col-md-4 col-sm-12 col-xs-12">
  box4
</div>

CSS

.box {
  background:#ccc;
  float:left
}
.col-lg-4 {
  width:33.3333%
}
.col-lg-6 {
  width:50%;
}
.col-lg-8 {
  width:66.6666%
}
.col-lg-12 {
  width:100%
}

JavaScript

var items = $('.box');
var twoThirds = "col-lg-8 col-md-8 col-sm-12 col-xs-12";
var fullCol = "col-xs-12";

$.fn.deColumnize = function() {
	 return $(this).removeClass(function (index, className) {
     return (className.match(/col-[a-z]{2}-([0-9]{1,2})?/g) || []).join(' ');
   })
}

items.each(function() {
    if (this.scrollWidth >  $(this).innerWidth()) {
        if($(this).prev('.box').hasClass('col-lg-4')){
          $(this).deColumnize()
        }
        else if($(this).prev('box').length && !$(this).hasClass('.col-lg-4')){
            $(this).deColumnize()
        } 
    }
})

/* items.removeClass(function (index, className) {
                return (className.match(/col-[a-z]{2}-([0-9]{1,2})?/g) || []).join(' ');
            }); */