web-dev-qa-db-ja.com

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

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

サンプル結果：

single=Single2&multiple=Multiple&radio=radio1
jqueryserialization
107
BrokeMyLegBiking

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

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

デモについては http://jsbin.com/azodo を確認してください（コードについては http://jsbin.com/azodo/edit ）

267
jitter

JQueryが調べる項目を制限すると、コードの速度を改善できます。

それを達成するには、セレクター：inputではなく*を使用します。

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

これにより、アイテムのリストが短くなるため、コードが高速になります。

21
ThiagoPXP

serializediv内のすべてのフォーム要素。

Div #target-div-idを使用してformを使用：

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

私が現在使用している機能：

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

これも試してください：

$（ '＃divId'）。find（ 'input'）。serialize（）

3
Alberto Buschettu

私のソリューションはどうですか：

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>
2
Briganti

それらの要素に共通のクラス名がある場合、これも使用できます。

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

これにより、jQueryセレクター_:input_を使用して選択されるボタンの選択を回避できます。これは、$('#your_div :input:not(:button)').serialize();を使用することでも回避できますが

0
Yogesh Mistry
$('#divId > input, #divId > select, #divId > textarea').serialize();
0
jefissu