jQuery pour sérialiser les seuls éléments à l'intérieur d'un div

Je voudrais obtenir le même effet que jQuery.serialize() mais je voudrais revenir seul l'enfant elments de div.

Exemple de résultat :

single=Single2&multiple=Multiple&radio=radio1
InformationsquelleAutor BrokeMyLegBiking | 2009-12-01
  1. 267

    Pas de problème. Utilisez simplement le suivant. Cela va se comporter exactement comme la sérialisation d'une forme, mais à l'aide d'un div de contenu.

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

    Vérifier http://jsbin.com/azodo pour une démonstration (http://jsbin.com/azodo/edit pour le code)

    • Ne serait pas $("#divId").find("select, textarea, input").serialize(); le rendement de meilleures performances? J'imagine que le ci-dessus pourrait devenir lent si la div a beaucoup d'éléments, comme un tableau avec plusieurs lignes/colonnes.
    • En tant que figurant dans les autres réponses, $('#divId :input').serialize() serait plus efficace.
    • il est en effet plus rapide: jsfiddle.net/QAKjN voir la console: la différence est de 4ms
    • ce n'est pas très précis de façon à tester. Si vous changez l'ordre des déclarations, vous remarquerez qu'il n'y a pas vraiment de différence: jsfiddle.net/QAKjN/10. Il n'y a plus en jeu que les sélecteurs
    • Clairement cela aussi, ne sérialise les entrées, afin de David Murdoch commentaire serait la bonne façon de le faire.
    • jQuery: "Parce que :l'entrée est une extension jQuery et ne fait pas partie de la spécification CSS, requêtes à l'aide de :entrée ne peut pas profiter de l'augmentation des performances fournies par les natifs de DOM querySelectorAll() la méthode à." à l'aide de $("[nom]") seront mieux: document.querySelectorAll ("[nom]');
    • cela n'a l'air de travailler avec jquery 1.11.1 il renvoie une chaîne vide si j'utilise sérialiser avec le courant sélecteur de $("#divId :input") , bien que si je supprime la méthode de sérialisation , il retourne tous les éléments d'entrée à l'intérieur de la div-tu , aucune idée pourquoi
    • il ne fonctionne pas avec la dernière version trop, étrange

    InformationsquelleAutor jitter
  2. 21

    Vous pouvez améliorer la vitesse de votre code si vous restreindre les éléments jQuery va regarder.

    Utiliser le sélecteur :entrée au lieu de * pour l'atteindre.

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

    Cela permettra de rendre votre code plus vite, parce que la liste des éléments est la plus courte.

    InformationsquelleAutor ThiagoPXP
  3. 12

    serialize les éléments à l'intérieur d'un div.

    Vous pouvez le faire par le ciblage de la div #target-div-id à l'intérieur de votre form à l'aide de :

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

    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;
}
    • Aussi .find('[nom]').serialize(); peut être utilisé pour filtre "serializable" d'éléments.
    InformationsquelleAutor Lukasz Frankowski
  5. 3

    Essayez également ceci:

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

    • Ce ne sera pas sérialiser sélectionner des éléments et ces zones de texte dans le div
    InformationsquelleAutor Alberto Buschettu
  6. 2

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

    JS:

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

    HTML:

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

    InformationsquelleAutor Briganti
  7. 0
    $('#divId > input, #divId > select, #divId > textarea').serialize();
    • Si la virgule est utilisée, vous devez spécifier le ID dans chaque sélecteur, comme: $('#divId > input, #divId > select, #divId > textarea'); Aussi, le > symbole, il se réfère à diriger les enfants des éléments... Très inhabituel dans ce scénario, ou du moins, très restrictive .
    InformationsquelleAutor jefissu
  8. -1

    Si ces éléments ont en commun un nom de classe, on peut aussi 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. Mais cela peut aussi être évitée en utilisant $('#your_div :input:not(:button)').serialize();

    InformationsquelleAutor Yogesh Mistry