JQuery 用响应式 Div 包装表格单元格

Question

我有一个 SharePoint 表 table#layoutsTable那是自动生成的。我可以用 div.row 包裹整个表格元素。我正在尝试将单个类添加到 td带有 columns 的元素+ .large-#基于单元格宽度属性的元素。这是压缩的 html 标记:

<span id="DeltaPlaceHolderMain">
    ...
        <div class="row">
            <table id="layoutsTable" style="width: 100%;">
                <tbody>
                    <tr style="vertical-align: top;>
                        <td style="width: 66.6%;">
                            ...
                        </td>
                        <td style="width: 33.3%;">
                            ...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    ...
</span>

<div class="row">元素已经用 jquery 手动包装到标记中，并尝试将类添加到此代码段中的单个单元格:

$(document).ready(function(){
    $('table#layoutsTable').wrap('<div class="row">'); //operates properly

    $('table#layoutsTable td').each(function(){
        var width = $(this).css('width');
        console.log(width);
        if(width === '66.6%'){
            $(this).addClass('large-8 columns');
        }

        if(width === '33.3%'){
            $(this).addClass('large-4 columns');
        }
    });
});

另一种方法(尽管响应性的选择有限)是简单地将这些响应类添加到单元格本身。但是，这不是首选。

Answer 1

我不会用 div 包裹 td。它违背了拥有表结构的目的。只需将类添加到 td 即可。

$(this).addClass("large-8 columns");

http://api.jquery.com/addClass/