如何使用带有包装器的Javascript / jQuery动态修改CSS类？

Question

我有一个表的现有html代码。

例如。

<div class="content-entry">
    <table class="old-style" border="3">
        <tr align="middle">
            <td style="font-weight:bold"></td>
        </tr>
    </table>
</div>

我想通过注入包装器<div>有条件地删除当前表的所有属性/类，并应用css类样式来覆盖使用Javascript / jQuery的现有表行为。

conten-entry可能有多个table块，我想对所有这些块应用相同的样式更改。

至：

<div class="content-entry">
    <div class="responsive-table">
        <table class="table table-bordered table-condensed">
            <tr>
                <td></td>
            </tr>
        </table>
    </div>
</div>

如何在不更改原始html代码的情况下执行此操作？

Answer 1

使用.wrap ， 将HTML结构包装在匹配元素集中的每个元素周围

 $('.old-style').wrap('<div class="responsive-table"></div>').removeClass().addClass('table table-bordered table-condensed'); 

 .responsive-table { color: red; } .table { font-weight: bold; } .table-bordered { border: 2px solid black; } .table-condensed>tbody>tr>td, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>td, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>thead>tr>th { padding: 5px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="content-entry"> <table class="old-style"> <tr> <td>Hello</td> </tr> </table> </div> 

注意：不带任何参数调用.removeClass将删除该项目的所有类。