jQuery仅序列化div中的元素

我希望获得与

jQuery.serialize（）

相同的效果，但我只希望返回给定

div

的子元素

样本结果：

single=Single2&multiple=Multiple&radio=radio1

---

没问题。只需使用以下命令。这与序列化表单完全一样，但使用div的内容

$('#divId :input').serialize();

---

检查演示（代码）

如果限制jQuery将查看的项目，则可以提高代码的速度

使用选择器：输入而不是*来实现它

$('#divId :input').serialize()

这将使您的代码更快，因为项目列表更短。

还可以尝试以下操作：

$（'#divId'）。查找（'input'）。序列化（）

---

我当前使用的功能：

/**
 * Serializes form or any other element with jQuery.serialize
 * @param el
 */
serialize: function(el) {
    var serialized = $(el).serialize();
    if (!serialized) // not a form
        serialized = $(el).
          find('input[name],select[name],textarea[name]').serialize();
    return serialized;
}

---

我的解决方案如何：

function serializeDiv( $div, serialize_method )
{
    // Accepts 'serialize', 'serializeArray'; Implicit 'serialize'
    serialize_method = serialize_method || 'serialize';

    // Unique selector for wrapper forms
    var inner_wrapper_class = 'any_unique_class_for_wrapped_content';

    // Wrap content with a form
    $div.wrapInner( "<form class='"+inner_wrapper_class+"'></form>" );

    // Serialize inputs
    var result = $('.'+inner_wrapper_class, $div)[serialize_method]();

    // Eliminate newly created form
    $('.script_wrap_inner_div_form', $div).contents().unwrap();

    // Return result
    return result;
}

/* USE: */

// For: $('#div').serialize()
serializeDiv($('#div')); /* or */ serializeDiv($('#div'), 'serialize');

// For: $('#div').serializeArray()
serializeDiv($('#div'), 'serializeArray');

函数serializeDiv（$div，serialize\u方法）
{
//接受“serialize”、“serializeArray”；隐式“serialize”
serialize_method=serialize_method | |'serialize'；
//包装器窗体的唯一选择器
var internal_wrapper_class='any_unique_class_for_wrapped_content'；
//用表单包装内容
$div.wrapInner（“”）；
//序列化输入
var result=$（'..+内部包装器\类，$div）[序列化\方法]（）；
//删除新创建的表单
$（'.script_wrap_inner_div_form'，$div.contents（）.unwrap（）；
//返回结果
返回结果；
}
/*使用：*/
//For:$（'#div'）。序列化（）
序列化div（$（'#div'））；/*或*/serializeDiv（$（'#div'），'serialize'）；
//For:$（'#div'）。序列化数组（）
serializeDiv（$（'#div'），'serializeArray'）；

函数serializeDiv（$div，serialize\u方法）
{
//接受“serialize”、“serializeArray”；隐式“serialize”
serialize_method=serialize_method | |'serialize'；
//包装器窗体的唯一选择器
var internal_wrapper_class='any_unique_class_for_wrapped_content'；
//用表单包装内容
$div.wrapInner（“”）；
//序列化输入
var result=$（'..+内部包装器\类，$div）[序列化\方法]（）；
//删除新创建的表单
$（'.script_wrap_inner_div_form'，$div.contents（）.unwrap（）；
//返回结果
返回结果；
}
/*使用：*/
var r=serializeDiv（$（'#div'））；/*或serializeDiv（$（'div'），'serialize'）*/
log（“For:$（'#div'）.serialize（）”；
控制台日志（r）；
var r=serializeDiv（$（'#div'），'serializeArray'）；
log（“For:$（'#div'）.serializeArray（）”；
控制台日志（r）

text区域_值
序列化
div
中的所有表单元素。
您可以通过使用以下方法将div
#target div id
定位到
表单中的div
：

$('#target-div-id').find('select, textarea, input').serialize();

如果这些元素有一个公共类名，也可以使用：

$('#your_div .your_classname').serialize()

这样可以避免选择按钮，这些按钮将使用jQuery选择器
：input
进行选择。虽然这也可以通过使用
$（'#您的_div:input:not（：button'））来避免
不会
$（“#divId”）.find（“select，textarea，input”）.serialize（）是否有更好的性能？我想如果div有很多元素，比如一个有几行/几列的表，上面的过程可能会变慢。如其他答案中所列，$（“#divId:input”）.serialize（）会更有效。@eaterofs这不是一种非常准确的测试方法。如果切换语句的顺序，您会注意到实际上没有任何区别：。除了选择器还有更多的功能，显然这也只是序列化输入，因此David Murdoch的评论将是正确的方式。jQuery：“因为：input是jQuery扩展，而不是CSS规范的一部分，使用：input的查询无法利用本机DOM querySelectorAll（）方法提供的性能提升。”使用$（'[name]'）会更好：document.queryselectoral（'[name]'）；这不会序列化div中的select元素和textarea。这更正了select和textarea问题：
$（“#divId”）。查找（“select，textarea，input”）。序列化（）也.find（'[name]'）.serialize（）；可用于筛选“可序列化”元素。如果使用逗号，则需要在每个选择器中指定
ID
，如：
$（“#divId>input，#divId>select，#divId>textarea”）
；另外，
符号表示直接子元素。。。在这种情况下非常不寻常，或者至少非常严格。
$('#your_div .your_classname').serialize()