jQuery仅序列化div中的元素答案

【问题标题】：jQuery to serialize only elements within a divjQuery仅序列化div中的元素
【发布时间】：2010-12-22 05:15:55
【问题描述】：

我想获得与jQuery.serialize() 相同的效果，但我想只返回给定div 的子元素。

示例结果：

single=Single2&multiple=Multiple&radio=radio1

【问题讨论】：

标签： jquery serialization

【解决方案1】：

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

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

查看https://jsbin.com/xabureladi/1 以获取演示（https://jsbin.com/xabureladi/1/edit 获取代码）

【讨论】：

$("#divId").find("select, textarea, input").serialize(); 不会产生更好的性能吗？我想如果 div 有很多元素，上面的内容可能会变慢，比如一个有几行/多列的表格。
如其他答案中所列， $('#divId :input').serialize() 会更有效。
@EaterOfCorpses 这不是一种非常准确的测试方法。如果您切换语句的顺序，您会发现实际上并没有任何区别：jsfiddle.net/QAKjN/10。除了选择器之外，还有更多的作用
显然这也只是序列化输入，所以大卫默多克的评论是正确的做法。
jQuery：“因为 :input 是一个 jQuery 扩展，而不是 CSS 规范的一部分，所以使用 :input 的查询不能利用原生 DOM querySelectorAll() 方法提供的性能提升。”使用 $('[name]') 会更好： document.querySelectorAll('[name]');

【解决方案2】：

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

使用选择器 :input 而不是 * 来实现。

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

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

【讨论】：

【解决方案3】：

`serialize` `div` 中的所有表单元素。

您可以通过使用 form 中的 div #target-div-id 来做到这一点：

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

【讨论】：

【解决方案4】：

我目前使用的功能：

/**
 * 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;
}

【讨论】：

还有 .find('[name]').serialize();可用于过滤“可序列化”元素。

【解决方案5】：

也试试这个：

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

【讨论】：

这不会序列化 div 中的选择元素和文本区域
这更正了 select 和 textarea 问题：$("#divId").find("select, textarea, input").serialize();

【解决方案6】：

我的解决方案呢：

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');

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: */

var r = serializeDiv($('#div')); /* or serializeDiv($('#div'), 'serialize'); */
console.log("For: $('#div').serialize()");
console.log(r);

var r = serializeDiv($('#div'), 'serializeArray');
console.log("For: $('#div').serializeArray()");
console.log(r);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
  <input name="input1" value="input1_value">
  <textarea name="textarea1">textarea_value</textarea>
</div>

【讨论】：

【解决方案7】：

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

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

这样您可以避免选择按钮，这些按钮将使用 jQuery 选择器:input 进行选择。虽然这也可以通过使用$('#your_div :input:not(:button)').serialize();来避免

【讨论】：

【解决方案8】：

$('#divId > input, #divId > select, #divId > textarea').serialize();

【讨论】：

如果使用逗号，则需要在每个选择器中指定ID，如：$('#divId > input, #divId > select, #divId > textarea')；此外，> 符号指的是直接子元素……在这种情况下非常不寻常，或者至少非常严格。

serialize div 中的所有表单元素。

`serialize` `div` 中的所有表单元素。