jquery如何在子表单div中选择表单元素

Posted 2023-05-08

【中文标题】jquery如何在子表单div中选择表单元素

【英文标题】：jquery how to select form elements in sub-form div

【发布时间】：2012-06-28 16:02:30

【问题描述】：

假设我有以下表格：

​

​<form id="f">
    <input name="a"/>
    <input name="b"/>
    <div id="sub_part">
        <input name="c"/>
        <input name="d"/>
    </div>
</form>
<form id="e">
    <input name="a"/>
    <input name="b"/>
    <div id="sub_part2">
        <input name="c"/>
        <input name="d"/>
    </div>
</form>

我通常可以使用.serialize() 获取所有名称-> 值对。例如。我知道我可以通过以下方式从f 表格中获取信息：

$('form#f').serialize();

如果只想要sub_part div 中f 形式的名称-> 值对怎么办？在这种情况下，jquery 选择器会是什么？对于本练习，我不想更改 html 的结构。

请查看我列出问题的这个小提琴：http://jsfiddle.net/gu9XB/4/

注意我尝试选择子表单的方式不起作用。

【问题讨论】：

当 jQuery 文档说 .serialize()“在表示一组表单元素的 jQuery 对象上操作”时，它令人困惑。它没有，唯一官方支持的元素（作为容器）是form。也许他们会修复文档。见相关bug report。

【参考方案1】：

只需序列化 div 内的输入。您还使用了 .sub_part 所以它没有选择 div。如果已经有 ID，您可以通过 id 选择以使其更快

('#sub_part input').serialize();

这是一个有效的小提琴http://jsfiddle.net/gu9XB/21/

【参考方案2】：

使用这个：

$('#but1').click(function() 
    var data = $('form#f').serialize();
    alert(data);
);

$('#but2').click(function() 
    var data = $('#f #sub_part *').serialize();
    alert(data);
);​

这里是DEMO

【讨论】：

为什么在已经给出 ID 并且速度更快的情况下使用“表单”选择器？还使用#f #sub_part？您可以只使用 ID '#sub_part'，这是选择元素的最快方式

【参考方案3】：

使用以下代码 它会在你的情况下工作

 $('#f #sub_part input').serialize();

【讨论】：

这里是 jsfiddle 工作，即使你在两种形式中都有相同的 id jsfiddle.net/8XXDn/1

【参考方案4】：

如其他答案所述，serialize() 方法不适用于 div。解决这个问题的一种方法是创建一个 jQuery 对象，它将处理并将您选择的元素附加到此：

var data = $('<form>').append($('form#f .sub_part')).serialize();

【参考方案5】：

使用这个 CSS 选择器

$('#e > div')

这将选择sub_part div。匹配发生是因为它是表单元素的直接子元素。如果sub_part中有嵌套的div，则不会受到影响。

您还有一个带有 sub_part 的重复 ID。您应该将 id 更改为一个类或更改其中一个 id 的名称。

http://jsfiddle.net/dceast/gu9XB/15/

【讨论】：

此方法在 jsfiddle 示例中对我不起作用。如果您认为它有效，请使用我提供的 jsfiddle 发布一个有效的示例。

您应该在表单、输入、文本区域上进行序列化，或者选择不是子 div，因此您需要将其拆分。 jsfiddle.net/dceast/gu9XB/15