jquery - hack jQuery 序列化不在表单内的 &lt;input&gt; 和 <select> 元素的值

Question

我一直在 stackoverflow 和其他地方查看大量帖子来寻找这个答案，但仍在努力寻找适合我的应用程序边界的东西。

我正在现有插件 ( http://johnny.github.com/jquery-sortable/ ) 的基础上为小学生创建一个拖放式 html 编辑器。该插件使用 jQuery 将输出序列化为类似于 HTML 源代码的格式，从而自动更新网页预览窗口。 Contenteditable 跨度可以很好地允许用户输入值，而不会意外地自行编辑 html 标签。

但是，我无法获取要包含在序列化输出中的输入或选择元素的值。查看用于序列化的 jQuery API 后，似乎表明 <input> 元素必须位于表单内，并且还具有 name 属性。这不适合我的项目的性质，所以我正在寻找一种破解/解决方法。

如果有人知道如何确保输入和选择元素值包含在序列化输出中，我将不胜感激!

编辑:这是我可以获得的最实时演示状态的链接:http://tinker.io/5bdab/5 . 在尝试了几个地方放置我的代码(jsbin、tinkerbin、jsfiddle)后，似乎它们在显示 iframe 时都有问题？所以你看不到一个令人敬畏的事实，即拖放中间列中的元素最终会导致旁边的实时 html 页面预览发生变化...但是，你仍然可以看到下面生成的源代码中的结果得到通过序列化进行更改(我需要帮助来弄清楚如何序列化输入和选择元素，以便它们的值将显示在文本区域中)。

但是，整个文件仅在 HTML 部分中(为了方便此类实例，而不是标准做法)，因为我链接到外部 js 文件并定义了内部样式 - 如果您愿意，您可以只需将 html 文件保存到您的计算机并查看即可。我不知道有更好的选择来显示支持 iframe 的实时演示:/

Answer 1

尝试将所有内容包装在 div 中

<div id="wrapper">
    <input type="text" value="text text" name="text"> <br> 
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>
    <textarea name="textarea">textarea text</textarea>
</div>

然后序列化此 div 内的所有元素

$("#wrapper").find("select,textarea, input").serialize();

Demo