javascript - jQuery - 重现序列化()

Question

我有多个 div 元素，每个元素都有一组表单字段(文本输入和选择)。

这些字段具有 rel 属性，而不是 name 属性，该属性与“name”应具有的值相同。

如何在这些字段上重现 jQuery 序列化 (http://api.jquery.com/serialize/) 的行为？

HTML 看起来像这样:

<div>
  <input type="text" rel="title" value="bla" />
  <input type="text" rel="count" value="5" />
  <select rel="page">
    <option value="home">home</option>
    <option value="about" selected="selected">about</option>
    <option value="404">404</option>
  </select>
  <input type="hidden" name="serialize_above_fields[]" value="" />
</div>

<div>
  <input type="text" rel="title" value="bla" />
  <input type="text" rel="count" value="5" />
  <select rel="page">
    <option value="home">home</option>
    <option value="about" selected="selected">about</option>
    <option value="404">404</option>
  </select>
  <input type="hidden" name="serialize_above_fields[]" value="" />
</div>

...

基本上，我想生成一个隐藏的输入字段，其中包含其所在 div 内字段的所有值(并使用 rel 作为键)，例如:

<input type="hidden" name="serialize_above_fields[]" value="title=bla&count=5&page=check2&page=about" />

Answer 1

您可以使用 jQuery 的 map 实用程序来轻松完成此操作。

$('div').each(function() {
  var serializedData = $(this).find(':text, select').map(function(i, el) {
    return $(el).attr('rel') + '=' + $(el).val();
  }).get();

  $(this).find('input[type=hidden]').val(serializedData.join('&'));
});