div内の要素のみをシリアル化するjQuery


111

同じ効果を得たいのjQuery.serialize()ですが、与えられたの子要素のみを返したいのdivですが。

サンプル結果:

single=Single2&multiple=Multiple&radio=radio1

回答:


277

問題ない。以下を使用してください。これはフォームのシリアル化とまったく同じように動作しますが、代わりにdivのコンテンツを使用します。

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

デモについては、https://jsbin.com/xabureladi/1を確認してください(コードについては、https://jsbin.com/xabureladi/1/edit


58
$("#divId").find("select, textarea, input").serialize();パフォーマンスは向上しませんか?divに多数の行/列を持つテーブルのような要素がたくさんある場合、上記が遅くなると思います。
デビッドマードック

3
他の回答に記載されているように、$( '#divId:input')。serialize()の方が効率的です。
jfountain

2
@EaterOfCorpsesは、テストするのにあまり正確な方法ではありません。ステートメントの順序を切り替えると、jsfiddle.net / QAKjN / 10のように、実際には違いがないことがわかります。セレクターよりも多くのものがあります
ロンデル2013

2
明らかに、これも入力をシリアル化するだけなので、David Murdochsのコメントがそれを行う正しい方法になります。
スーパーフォニック2014

2
jQuery:「:inputはjQuery拡張であり、CSS仕様の一部ではないため、:inputを使用するクエリは、ネイティブDOM querySelectorAll()メソッドによって提供されるパフォーマンスの向上を利用できません。」$( '[name]')を使用する方が良いでしょう:document.querySelectorAll( '[name]');
AbdullahAydın2016

22

jQueryが参照する項目を制限すると、コードの速度を向上させることができます。

これを実現するには、*の代わりにセレクタ:inputを使用します。

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

アイテムのリストが短いため、コードが速くなります。


15

serialize内のすべてのフォーム要素div

あなたは#target-div-idあなたのformusing 内のdiv をターゲットにすることでそれを行うことができます:

$('#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(); 'serializable'要素をフィルタリングするために使用できます。
AbdullahAydın2016

3

これも試してください:

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


6
これは、div内の選択された要素とテキスト領域をシリアル化しません
Jeff Walker Code Ranger

これにより、selectおよびtextareaの問題が修正されます。<code> $( "#divId")。find( "select、textarea、input")。serialize(); <// code>
TroySteven

3

私の解決策はどうですか:

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


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
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.