如何在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>

如何通过使用jQuery在div id payment_group中用col-md-4替换col-md-6？ 对不起，我的英语不好。

Answer 1

通常，您可以简单地执行以下操作：

$('#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"‌​);

切换选项不是最好的，如果不存在，它将添加一个类，如果不存在，则将其删除。

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>

为col-md-6 div添加一个名为“ changeclass”的ID

然后在jQuery中

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

Answer 3

您可以使用$("#payment_group .col-md-6").addClass("col-md-4").removeClass("col-md-6")

工作演示

 $("#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. 使用addClass（）和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

试试这个

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

谢谢

Answer 8

试试这个删除课程

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

并添加

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

您可以在此处查看w3schools网站。

对于添加类，请检查此。

Answer 9

我认为这也会对您有帮助！

 <!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");