Question

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

脚本需要执行以下操作：

检查当前页面是否为类别页面。
定位指定的表格
将其附加到#MainForm

我创建了一个JS小提琴，其中包含所有相关信息： 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/

Answer 2

确定您在类别页面后放置此代码：

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

Answer 3

这个简单的功能可以满足您的要求。它做出了某些假设：

着色由现有的CSS
需要移动的表是content_area

代码：

// 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"));
}

适用于您的fiddle

使用jquery定位和移动子元素

3 个答案: