使用 jquery 重新排列 div 层次结构答案

【问题标题】：Rearranging div hierarchy with jquery使用 jquery 重新排列 div 层次结构
【发布时间】：2009-02-21 12:49:56
【问题描述】：

我正在使用 jQuery 的 form plugin 异步提交表单。服务器通过设置 ajaxForm 调用的目标将 HTML 发送回 div #boardcontainer。这很好用。

...
    var options = { 
      target:        '#boardcontainer',    // target element(s) to be updated with server response 
      beforeSubmit:  showRequest,  // pre-submit callback 
      success:       showResponse  // post-submit callback 
      };
    $('#myForm').ajaxForm(options); 
...

问题是，从服务器返回的 HTML 包含两个 div：

<div id="board">
...
</div>
<div id="status">
...
</div>

"#board" 是一个巨大的由服务器预渲染的 HTML 表格。 “#status”是一条短消息，理想情况下应该进入除#boardcontainer 之外的一个div。

处理这种情况的最佳方法是什么？ jquery可以更改div的父级吗？如果是这样，我可以在提交后回调中更改父级，但我似乎找不到方法。

【问题讨论】：

标签： jquery-plugins jquery

【解决方案1】：

在您的成功回调中，您可以使用 appendTo 重新排列 div。或者，您可以返回 json 并在成功回调中构建 div。

 $('#status').appendTo('#realTarget');

编辑：检查后，appendTo 本身会执行您需要它执行的操作，而不会丢失事件处理程序。

【讨论】：

我会说你应该返回 JSON。将数据呈现为 html 是页面的工作，您不应该在代码中编写 html。
在 ASP.NET MVC 中，该操作可以呈现部分视图，在这种情况下，返回 HTML 是完全可以接受的，因为它是执行呈现的视图代码。从示例代码中很难判断是否是这种情况。
您是否建议您在 javascript 中将 JSON 转换为 HTML？我们的许多需要加载复杂 HTML 的 ajax 调用会执行包含 HTML 模板并返回该 HTML 的脚本。它允许我们的设计师在不需要程序员的情况下更改设计。
@jonstjohn -- 我假设您引用的是@Andrew 的评论。如果是这样，澄清会很有帮助。至于我，我只是把它作为一种可能性提供。你所做的似乎是合理的，但它确实提出了一个问题，即为什么要在代码中重新排列设计人员的视图。
@Andrew：我认为我对笼统的陈述“你不应该在你的代码中编写 html”有异议。那么 jquery.load() 有什么意义呢？您如何正确使用仅带有 JSON 的 jquery 表单？我认为这是一个不错的设计目标，但实际上，服务器非常擅长构建 html。

【解决方案2】：

我最终用 json 构建了 div（不过，div 的 html 嵌入为字符串）

代码如下：

$(document).ready(function () {
    var options = {
        beforeSubmit: showRequest,  // pre-submit callback 
        success: showResponse,  // post-submit callback 
        dataType: 'json'
    };
    $('#myForm').ajaxForm(options);
});

function showResponse(data) {
    $('#statusTarget').html(data.status);
    $('#boardcontainer').html(data.board);
};

它可以工作，每次提交表单时，#statusTarget 和 #boardTarget 都会被新的 html 替换。

【讨论】：