使用 jQuery 获取带有数据的 HTML

Posted 2023-05-07

【中文标题】使用 jQuery 获取带有数据的 HTML

【英文标题】：Getting HTML with the data using jQuery

【发布时间】：2011-07-04 05:54:19

【问题描述】：

我有一个包含许多元素（例如 textarea、input、select）的表单，在用户输入一些数据后，这些元素的状态应该会改变。

例如，input[type="radio"] 元素将具有checked="checked" 属性，如果用户已选中它。 input[type="text"] 元素的 value 属性将包含用户输入的文本。

问题是$('#form1').html()返回的html字符串不包含这些数据。

随意看看这个例子：

http://jsfiddle.net/cmNmu/

可以看到无论你输入什么，返回的html都是一样的（没有属性数据）。

有没有简单的方法来收集 html 包括它们的状态？

提前致谢。

【问题讨论】：

重要的是收集所有的html还是只收集值？

@Krtek：只收集值很容易，但我需要所有 html。

收集HTML通常是错误的，它是文本形式的序列化数据。而是迭代 DOM 元素以保留意义，顺便说一句，让您的生活更轻松。

我想我明白你想要什么。我可以改写你的问题吗？

@Šime Vidas：当然。请随意这样做。

【参考方案1】：

使用下面的代码通过 jQuery 获取输入类型文本的值

alert($("input:text").val())

【参考方案2】：

也许您可以使用 'onblur' 事件处理程序在您离开时设置元素的值

【参考方案3】：

您应该使用以下方法获取值：

$('#form1').find(':input').val();
$('#form1').find(':radio[name=gender]:checked').val();

如果您有多个输入，那么您可以过滤它们的名称或类别，甚至是 ID。然后您需要使用.find(':input[name=input_field_name]') 选择输入。我的建议是：如果要使用表单，请使用 name 属性而不是其他属性。

【参考方案4】：

人们通常使用$('#form1').serialize() 来获取值。如果html() 没有同时返回源和数据，我认为除了通过查看数据手动构建完整的 html 之外，您没有什么可以做的。

现场演示： http://jsfiddle.net/cmNmu/6/

【参考方案5】：

使用gnarf编写的jQueryformhtml插件：

jQuery html() in Firefox (uses .innerHTML) ignores DOM changes

输入元素的变化可以反映在formhtml()返回的html字符串中。

非常感谢大家。