How to replace class name inside div id?

Question

HTML:

<div id="payment_group">
    <div class="col-md-6">
        <div class="form-group form-md-line-input">
            <label for="form_control_1">Paid Amount</label>
            <input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group form-md-line-input" style="margin-bottom: 0px">
            <label>Payment Mode</label>
            <select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
                <option value="">Select Payment Mode</option>
                <option value="Cash">Cash</option>
                <option value="Card">Card</option>
                <option value="Credit">Credit</option>
            </select>
        </div>
    </div>
</div>

How to replace col-md-6 with col-md-4 inside div id payment_group by using jQuery? Sorry for my weak English.

Answer 1

Normally, you could simply do this:

$('#payment_group .col-md-6').toggleClass('col-md-6 col-md-4');
//Or
$('#payment_group .col-md-6').addClass("col-md-4").removeClass("col-md-6"‌​);

The toggle option is not the best, it will add a class if it does not exist and remove it if it does... It's a bit more concise tough...

Answer 2

<div id="payment_group">
<div class="col-md-6" id="changeclass">
    <div class="form-group form-md-line-input">
        <label for="form_control_1">Paid Amount</label>
        <input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
    </div>
</div>

add one id named="changeclass" for col-md-6 div

then in jquery

$("#changeclass").toggleClass('col-md-4');

Answer 3

You can use $("#payment_group .col-md-6").addClass("col-md-4").removeClass("col-md-6")

Working demo

 $("#payment_group .col-md-6").addClass("col-md-4").removeClass("col-md-6") console.log("elements with class col-md-4: " + $("#payment_group .col-md-4").length) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="payment_group"> <div class="col-md-6"> <div class="form-group form-md-line-input"> <label for="form_control_1">Paid Amount</label> <input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value=""> </div> </div> <div class="col-md-6"> <div class="form-group form-md-line-input" style="margin-bottom: 0px"> <label>Payment Mode</label> <select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()"> <option value="">Select Payment Mode</option> <option value="Cash">Cash</option> <option value="Card">Card</option> <option value="Credit">Credit</option> </select> </div> </div> </div> 

Answer 4

1. Use addClass() and removeClass()

 $("#payment_group .col-md-6").addClass('col-md-4').removeClass('col-md-6') 

 .col-md-4 { color: red } .col-md-6 { color: blue } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="payment_group"> <div class="col-md-6"> <div class="form-group form-md-line-input"> <label for="form_control_1">Paid Amount</label> <input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value=""> </div> </div> <div class="col-md-6"> <div class="form-group form-md-line-input" style="margin-bottom: 0px"> <label>Payment Mode</label> <select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()"> <option value="">Select Payment Mode</option> <option value="Cash">Cash</option> <option value="Card">Card</option> <option value="Credit">Credit</option> </select> </div> </div> </div> 

Answer 5

您可以设置类而不管它是什么。

$("#payment_group .col-md-6").attr("class", "class-name-you-want-to-assign");

Answer 6

$("#payment_group").find(".col-md-6").addClass("col-md-4");
$("#payment_group").find(".col-md-6").removeClass(".col-md-6"); 

Answer 7

Try with this one

$( "#payment_group div:first-child" )
    $( this ).removeClass( ".col-md-6" );
    $( this ).addClass( ".col-md-4" );
});

Thanks

Answer 8

Try this to remove the class

$(selector).removeClass(classname,function(index,currentclass))

And to add

$(selector).addClass(classname,function(index,currentclass))

You can check w3schools site here.

and for add class, check this.

Answer 9

I think this will going to help u as well !

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#payment_group .col-md-6').toggleClass('col-md-6 col-md-4'); }); </script> </head> <body> <div id="payment_group"> <div class="col-md-6"> <div class="form-group form-md-line-input"> <label for="form_control_1">Paid Amount</label> <input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value=""> </div> </div> <div class="col-md-6"> <div class="form-group form-md-line-input" style="margin-bottom: 0px"> <label>Payment Mode</label> <select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()"> <option value="">Select Payment Mode</option> <option value="Cash">Cash</option> <option value="Card">Card</option> <option value="Credit">Credit</option> </select> </div> </div> </div> <button id="gete">Submit</button> </body> </html> 

Answer 10

您可以为此使用jQuery的addClass和removeClass ：

$('#payment_group').addClass("col-md-4").removeClass("col-md-6");