jQuery pour sérialiser uniquement les éléments d'un div

Je voudrais obtenir le même effet que jQuery.serialize()mais je voudrais ne renvoyer que les éléments enfants d'un donné div.

Exemple de résultat:

single=Single2&multiple=Multiple&radio=radio1

Aucun problème. Utilisez simplement ce qui suit. Cela se comportera exactement comme la sérialisation d'un formulaire mais en utilisant le contenu d'un div à la place.

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

Vérifiez https://jsbin.com/xabureladi/1 pour une démonstration ( https://jsbin.com/xabureladi/1/edit pour le code)

Vous pouvez améliorer la vitesse de votre code si vous limitez les éléments que jQuery examinera.

Utilisez le sélecteur : input au lieu de * pour y parvenir.

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

Cela rendra votre code plus rapide car la liste des éléments est plus courte.

serializetous les éléments de formulaire dans un fichier div.

Vous pouvez le faire en ciblant le div à l' #target-div-idintérieur de votre formutilisation:

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

La fonction que j'utilise actuellement:

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

Essayez aussi ceci:

$ ('# divId'). find ('entrée'). serialize ()

Et ma solution:

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>

Si ces éléments ont un nom de classe commun, on peut également utiliser ceci:

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

De cette façon, vous pouvez éviter la sélection de boutons, qui seront sélectionnés à l'aide du sélecteur jQuery :input. Bien que cela puisse également être évité en utilisant$('#your_div :input:not(:button)').serialize();

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