1

在这里发表我的第一篇文章是为了获得对我昨天处理的问题的特定解决方案的反馈。我想出了一些可以解决我的问题并达到预期效果的方法，但我认为充其量是一个不雅的解决方案，最坏的情况是一个丑陋的 hack。

问题：如何在页面上以特定顺序硬编码的四个 div 重新排序。目标：一种根据客户偏好快速重新排序这些块的方法。

限制：除了添加类和ID或包装器外，我无法触摸标记（我根本无法重新构造html）。这适用于已被多个不同客户使用的现有、可工作的产品。

这是删除内容的标记： 

<!-- content-panel 2 -->
<div id="home-messages-box" class="content-panel">
    <table cellspacing="0">
        <tr>
            <td class="tableCaption">
            </td>
        </tr>
    </table>
    <table class="tableContent" cellpadding="0" cellspacing="0">
        <tr>
            <td>
            </td>
        </tr>
    </table>
</div>

<!-- content-panel 3 -->
<div id="home-programs-box" class="content-panel">
    <table cellspacing="0">
        <tr>
        </tr>
    </table>
    <table class="tableContent" cellpadding="3" cellspacing="3">
        <tr>
            <td>
            </td>
        </tr>
    </table>
</div>

<!-- content-panel 4 -->
<div id="home-actionitems-box" class="content-panel">
    <table cellspacing="0">
        <tr>
            <td class="tableCaption">
            </td>
        </tr>
    </table>
    <table class="tableContent" cellpadding="0" cellspacing="0">
        <tr>
            <td>
            </td>
        </tr>
        <tr>
            <td>
            </td>
        </tr>
    </table>
</div>
</div><!-- content-panel-wrapper -->

这是我用来在页面加载后重新排序这些 Div 的 jQuery：

$(function () { 
    $("#home-actionitems-box").appendTo("#content-panel-wrapper");
    $("#home-welcome-box").appendTo("#content-panel-wrapper");
    $("#home-messages-box").appendTo("#content-panel-wrapper");
    $("#home-programs-box").appendTo("#content-panel-wrapper");
});

有没有更简单、更优雅的方法来做到这一点？我承认这可能是一个不灵活的结构的 hacky 解决方案，这是项目开始时没有 UI/UX 设计思维的结果（几年前）。但我对其他人的意见很感兴趣，他们有时不得不为此类问题提出不雅​​的解决方案。

4

0 回答 0