Javascript 使用jquery定位和移动子元素

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

脚本需要执行以下操作：

检查当前页面是否为类别页面

以指定的表为目标

将其附加到显示在#MainForm之前

我创建了一个JS文件，其中包含所有相关信息：

谢谢你能提供的任何帮助

以下是JSFIDLE 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>

此内容应显示在第二位，并应为蓝色
应首先显示此内容

确定您位于类别页面后，请放置此代码：

$('#content_area').find('table').first().remove().clone().appendTo('#MainForm');

---

这里有一个替代方案：

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

---

示例：

此简单函数将满足您的要求。它作出了某些假设：

着色由您现有的CSS负责

需要移动的表是

content\u区域的第一个表直接子级

代码：

---

在你的

上工作看起来不错，但由于某种原因不工作？我已经用你的代码更新了fiddle:Duh，因为fiddle页面不符合url要求：）我的坏。将在实际站点上进行测试。将css更改为

#MainForm table{background color:blue；}

以将其更改为蓝色背景。Gary，此脚本针对并移动正确的表，但.appendTo不完全是我要找的。我需要脚本在#MainForm之前插入表，而不是将其作为子元素添加。您可以使用

.before

或

insertBefore

方法，而不是

appendTo

方法，这应该可以解决问题。简单的解决方案。作品谢谢

// Script I currently have that checks if the page is a category page.
$(function() {
     if (location.pathname.indexOf("-s/") != -1) {
         moveTable();
     }
    else {
    }
});
// END Script I currently have that checks if the page is a category page.
function moveTable(){
    $("#MainForm").before($("#content_area > table:first-of-type"));
}