Replace class name without full class name

Question

Ok, so I'm trying to create a PHP page builder using jQuery and bootstrap.

Almost everything works for me, except for the ability to see the column resize.

My problem is that I am not sure how to replace the column size class variable, which may be between col-lg-1 and col-lg-12

So using jquery, I would like to be able to do the following.

• Get the current column database in the class: So, if the column is col-lg-4 , I want to get 4
• replace 4 with 3 or 5 depending on which direction the user is selected.
• remove the col-lg-4 class and add either the col-lg-3 or col-lg-5 class

Thus, the user can see on the screen how big this column will be.

To provide additional information. Here is the HTML

 <div class="col-lg-4 bs-example-popover"> <div class="popover" style="width:100%;"> <h3 class="popover-title">[Module Title] <button type="button" class="close">&times;</button></h3> <div class="popover-content"> <p>[Module Description]</p> <ul class="list-unstyled"> <li class="pull-right"><button class="btn btn-default btn-xs"><span class="icon-icomoon-arrow-right"></span></button></li> <li class="pull-right">&nbsp;</li> <li class="pull-right"><button class="btn btn-default btn-xs"><span class="icon-icomoon-arrow-left"></span></button></li> <li>&nbsp;</li> </ul> </div> </div> </div><!-- /column --> 

and my base JS will get the parent and button. But I do not know how to get only the size of the class, then add or subtract, and finally replace the class.

 $('.page-builder-column ul li .btn').on('click', function(e) { e.preventDefault(); var _btn = $(this).find('span'), _parent = $(this).parents().eq(4); if (_btn.hasClass('icon-icomoon-arrow-right')) { console.log('larger'); }else{ console.log('smaller'); } console.log(_parent.hasClass('col-lg-*')); }); 

Answer 1

You can do the following:

_parent.attr('class').match(/\d+/)[0]

which will return 4