快速更改元素的CSS类

Question

On a page using jQuery, if I want to to change all classes from

col-lg-3 form-group

to

col-lg-8 form-group

How can I do that?

Answer 1

$('.col-lg-3.form-group').toggleClass('col-lg-3 col-lg-8');

.toggleClass just toggles the classnames based off the list given.

So if you run it again it will be back to the original.

Answer 2

除了Tuvia和jlemm45的答案，您还可以执行以下操作：

$('.col-lg-3.form-group').switchClass( "col-lg-3", "col-lg-8", 0)

Answer 3

You can use removeClass() and addClass() . The below code will search for elements which have both .col-lg-3 and .form-group as class , and it will remove the col-lg-3 class for those elements and add col-lg-8 class.

$('.col-lg-3.form-group').removeClass('col-lg-3').addClass('col-lg-8');

Sample Demo

 $( ".form-group.col-lg-3" ).removeClass( "col-lg-3").addClass('col-lg-8'); 

 .form-group { color: blue; } .col-lg-3 { text-decoration: underline; } .col-lg-8{ font-size:50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 class="form-group col-lg-3">text</h3> <h3 class="form-group">text</h3> <h3 class="col-lg-3">text</h3> <h3 class="form-group col-lg-3">text</h3> 

Answer 4

Simple way to do it would be like below..

$('.col-lg-3.form-group').removeClass('col-lg-3').addClass('col-lg-8')

Removes the col-lg-3 class and adds col-lg-8 to all the elements which has the combinations of both the classes col-lg-3 and form-group in its class attribute.

Answer 5

有几种不同的方法，但是这是我要做的。

$('.form-group').removeClass('col-lg-3').addClass('col-lg-8');