javascript - 使用 jquery 定位和移动子元素

Question

我目前正在尝试为 Volusion 平台电子商务网站设计模板。我的类别页面上加载了一个表格，我需要使用脚本重新定位它。如果我能够向该表格元素添加一个独特的类，这将非常简单，但是 Volusion 平台已锁定页面的内部 HTML，允许我仅更改模板页眉/页脚 HTML。

脚本需要做以下事情:

1. 检查当前页面是否为类别页面。
2. 针对指定的表
3. 将其附加到#MainForm 之前显示

我创建了一个包含所有相关信息的 JS fiddle: http://jsfiddle.net/Lno034u8/1/

感谢您提供的任何帮助!

这是 JSFiddle HTML:

<div class="content">
    <main id="content_area">
        <!--Table To Move --><table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr><td>This Content Should display second, and should be colored blue</td></tr>
        </table><!-- / -->
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tbody>
                <tr>
                    <td>
                        <table width="100%" cellspacing="0" cellpadding="0" border="0"></table>
                        <table width="100%" cellspacing="0" cellpadding="8" border="0">
                            <tr><td>This Content Should display first</td></tr>
                        </table>
                        <!-- Move Table To This Position --><!-- / -->
                        <form id="MainForm"></form>
                        <table width="100%" cellspacing="0" cellpadding="0" border="0"></table>
                    </td>    
                </tr>    
            </tbody>    
        </table>    
    </main>
</div>

Answer 1

这里有一个替代方案:

$(function() {
     var table_to_move = $("#content_area").find("table").first();
     $("#content_area").find("form").before(table_to_move);
});

示例: http://jsfiddle.net/nr5q1Lkz/