jquery - 仅用 div 替换顶级父表元素，而不用子表替换

Question

我正在寻找用 div 替换表格及其行和单元格，但我找到的脚本也用 div 替换每个子表及其后代，这是我不想要的。子表应该保留为表。

如何仅定位顶级父表而不定位任何子表？

    $('table.calendar-header').each(function (){
        $(this).replaceWith( $(this).html()
            .replace(/<tbody/gi, "<div class='table'")
            .replace(/<tr/gi, "<div class='tr'")
            .replace(/<\/tr>/gi, "</div>")
            .replace(/<td/gi, "<div class='td")
            .replace(/<\/td>/gi, "</div>")
            .replace(/<\/tbody/gi, "<\/div")
        );
    });

我尝试将 :first-child 和 .first() 插入脚本中的各个位置，但无济于事。

这是脚本运行之前 HTML 的样子 [请注意，我在此代码片段中省略了子表中的内容]。可以看到父表中有表。我希望它们保持原样，而不是被替换。

<table class="calendar-header" cellspacing="0" cellpadding="6" border="0" style="">
    <tbody>
        <tr>
            <td valign="top">
                <table class="calendar" cellspacing="0" cellpadding="2"></table>
            </td>
            <td align="center">
                <div class="eventNav"></div>
            </td>
            <td valign="top" align="right">
                <table class="calendar" cellspacing="0" cellpadding="2"></table>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

我能够做到如下所示。

为了使其正常工作，您的子表不能有类calendar-header。如果这样做，您必须将检查 if ($(obj).closest("table").hasClass("calendar-header")) 更改为父表特有的内容。

顺便说一句，请注意，如果您的用户使用 Firefox 和 AdBlockPlus，任何具有 thead 类的 div 都会被 theAd 误认为(“广告” )，并且您的 div 将被插件隐藏(它将动态添加到 elemhide.css 的链接)。因此，我将生成的类名称更改为 divTable、divThead 等:

$('table.calendar-header').each(function (){
    // It's important to go from farthest tag to the nearest.
    $(this).find("th").each(replacer);
    $(this).find("td").each(replacer);
    $(this).find("tr").each(replacer);
    $(this).find("tbody").each(replacer);
    $(this).find("thead").each(replacer);
    replacer(0, this); // replace the table tag
});

function replacer(idx, obj) {
    tagName = capitalizeFirstLetter($(obj).prop("tagName").toLowerCase());
    if ($(obj).closest("table").hasClass("calendar-header")) {
        $(obj).replaceWith("<div class='div" + tagName + "'>" + obj.innerHTML + '</div>');
    }
}

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}