logo标签列表

jQuery序列化仅在div内部的元素

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

示例结果：

single=Single2&multiple=Multiple&radio=radio1
8个回答
299
63
如果div包含许多元素，比如一个有多行/列的表格，那么使用$("#divId").find("select, textarea, input").serialize();会更加高效。我想上述代码可能会变慢。 - David Murdoch
3
如其他答案所列，$('#divId :input').serialize() 更为高效。 - jfountain
2
@EaterOfCorpses，那不是一个非常准确的测试方式。如果您交换语句的顺序，您会注意到实际上没有任何区别：http://jsfiddle.net/QAKjN/10/。这里涉及到的不仅仅是选择器。 - Rondel
2
显然，这只序列化输入，所以David Murdochs的评论是正确的方法。 - superphonic
2
jQuery：“因为：input是jQuery扩展而不是CSS规范的一部分，使用：input的查询无法利用本地DOM querySelectorAll()方法提供的性能提升。” 使用$('[name]')会更好：document.querySelectorAll('[name]'); - Abdullah
显示剩余4条评论
23

如果限制jQuery将要查找的项，您可以提高代码的运行速度。

使用选择器:input代替*即可实现。

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

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

15

序列化在div内的所有表单元素。

您可以通过在form中定位#target-div-id来完成此操作，使用以下代码：

$('#target-div-id').find('select, textarea, input').serialize();
5
我目前使用的函数是:
/**
 * 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;
}
2
另外，.find('[name]').serialize(); 可以用于筛选“可序列化”的元素。 - Abdullah
3
尝试这个方法： $('#divId').find('input').serialize()
6
这将不会序列化div中的选择元素和文本域。 - Jeff Walker Code Ranger
这样可以解决选择和文本区域的问题：<code> $（“＃divId”）.find（“select，textarea，input”）.serialize（）; <// code> - TroySteven
2
我的解决方案怎么样：
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>

0
如果这些元素有一个共同的类名，也可以使用以下方法：
$('#your_div .your_classname').serialize()

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

0
$('#divId > input, #divId > select, #divId > textarea').serialize();
1
如果使用逗号，则需要在每个选择器中指定“ID”，例如：$('#divId > input, #divId > select, #divId > textarea')；此外，“>”符号表示直接子元素... 在这种情况下非常不寻常，或者至少非常受限制。 - gmo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接