CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
Robert E. McIntosh
Robert E. McIntosh

Reputation: 6135

replace class name without full class name

Alright so I am trying to make a PHP page builder using jQuery and bootstrap.

I got almost everything working except being able to see the change in the column size.

My problem is I am not sure how to replace the column size class variable which could be anything between col-lg-1 to col-lg-12

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

  1. Get the current column size base on class: So if the column is col-lg-4 I want to get the 4
  2. replace the 4 with a 3 or 5 based on which direction the user selected.
  3. remove the class col-lg-4 and add either the class col-lg-3 or col-lg-5

This way on the screen the user can see how big that column is going to be.

To provide more 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 basic JS will get the parent and the button. But I don't know how to get just the size of the class, then add or subtract, and lastly 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-*'));
});

Upvotes: 4

Views: 187

Answers (1)

Robert E. McIntosh
Robert E. McIntosh

Reputation: 6135

You can do the following:

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

which will return the 4

Upvotes: 1

Related Questions