JQuery 用复杂的选择器序列化答案

【问题标题】：JQuery serialize with complicated selectorJQuery 用复杂的选择器序列化
【发布时间】：2013-04-22 20:31:08
【问题描述】：

我有要序列化的表格，其中包含表格：

<form id="myForm" method="post">
    <table>
        <tr class="hide">
            <td><input /></td>
        </tr>
        <tr>
            <td><input /></td>
        </tr>
        ...
    </table>
</form>

我想使用 JQuery 序列化，但没有 <tr> 元素中的表单元素和 hide 类。我试过这个：

$('#myForm').not('.hide').serialize()

但not 中的选择器仅在表单元素中查找hide。有没有办法在not 选择器中检查父级最近的<tr> 元素？

【问题讨论】：

标签： javascript jquery forms serialization

【解决方案1】：

要在序列化之前从表单中删除元素，首先克隆表单然后删除不需要的元素并序列化可能更容易：

var cloned_form = $('#myForm').clone(false);
    cloned_form.remove('.hide');

var serialized = cloned_form.serialize();

另一种方法是定位表单内的所有元素，并过滤掉 .hide 元素内的任何内容，如下所示：

$('*','#myForm').filter(function() {
    return !$(this).closest('.hide').length;
}).serialize();

【讨论】：

我无法删除元素，因为在序列化之后是数据发布和验证。如果存在无效值，用户将需要使用已移除的表单元素。
您并没有真正从表单中删除任何内容，这就是克隆的重点，您正在从表单的副本中删除元素，这与在选择器。

【解决方案2】：

我认为你可以这样做：

$("#myForm :input:not(.hide input)").serialize();

【讨论】：

所有元素都不是input，还有select、checkbox和textarea。
改为使用 jQuery 的 :input 伪选择器，我认为它应该匹配所有可能的输入类型。