jQuery, um nur Elemente innerhalb eines Div zu serialisieren

111

Ich möchte den gleichen Effekt erzielen wie, jQuery.serialize()aber ich möchte nur die Kinderelemente eines bestimmten zurückgeben div.

Beispielergebnis:

single=Single2&multiple=Multiple&radio=radio1

jquery serialization BrokeMyLegBiking
quelle

277

Kein Problem. Verwenden Sie einfach Folgendes. Dies verhält sich genau wie das Serialisieren eines Formulars, verwendet jedoch stattdessen den Inhalt eines Div.

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

Prüfen https://jsbin.com/xabureladi/1 für eine Demonstration ( https://jsbin.com/xabureladi/1/edit für den Code)

Jitter
quelle

58

Würden Sie nicht $("#divId").find("select, textarea, input").serialize();eine bessere Leistung erzielen? Ich stelle mir vor, dass das oben Genannte langsam werden könnte, wenn das div viele Elemente hätte, wie eine Tabelle mit mehreren Zeilen / Spalten.

David Murdoch

3

Wie in anderen Antworten aufgeführt, wäre $ ('# divId: input'). Serialize () effizienter.

Brunnen

2

@EaterOfCorpses, das ist keine sehr genaue Methode zum Testen. Wenn Sie die Reihenfolge der Anweisungen ändern, werden Sie feststellen, dass es keinen wirklichen Unterschied gibt: jsfiddle.net/QAKjN/10 . Es ist mehr im Spiel als die Selektoren

Rondel

2

Dies serialisiert natürlich auch nur Eingaben, so dass David Murdochs Kommentar der richtige Weg wäre, dies zu tun.

Superphonic

2

jQuery: "Da: input eine jQuery-Erweiterung ist und nicht Teil der CSS-Spezifikation ist, können Abfragen mit: input die Leistungssteigerung der nativen DOM querySelectorAll () -Methode nicht nutzen." Die Verwendung von $ ('[Name]') ist besser: document.querySelectorAll ('[Name]');

Abdullah Aydın

22

Sie können die Geschwindigkeit Ihres Codes verbessern, wenn Sie die Elemente einschränken, die von jQuery angezeigt werden.

Verwenden Sie den Selektor : Eingabe anstelle von * , um dies zu erreichen.

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

Dadurch wird Ihr Code schneller, da die Liste der Elemente kürzer ist.

ThiagoPXP
quelle

15

`serialize`alle Formelemente innerhalb eines `div`.

Sie können dies tun, indem Sie auf das Div #target-div-idin Ihrer formVerwendung zielen :

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

Zakaria Acharki
quelle

5

Die Funktion, die ich derzeit benutze:

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

Lukasz Frankowski
quelle

2

Auch .find ('[Name]'). Serialize (); kann verwendet werden, um 'serialisierbare' Elemente zu filtern.

Abdullah Aydın

3

Versuchen Sie auch dies:

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

Alberto Buschettu
quelle

6

Dies wird nicht ausgewählte Elemente und Textbereiche in der div

Jeff Walker Code Ranger

Dies behebt das Problem mit Auswahl und Textbereich: <code> $ ("# divId"). Find ("Auswahl, Textbereich, Eingabe"). Serialize (); <// code>

TroySteven

3

Was ist mit meiner Lösung:

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

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Briganti
quelle

0

Wenn diese Elemente einen gemeinsamen Klassennamen haben, kann man auch diesen verwenden:

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

Auf diese Weise können Sie die Auswahl von Schaltflächen vermeiden, die mit dem jQuery-Selektor ausgewählt werden :input. Dies kann jedoch auch durch Verwendung vermieden werden$('#your_div :input:not(:button)').serialize();

Yogesh Mistry
quelle

0

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

Jefissu
quelle

1

Wenn ein Komma verwendet wird, müssen Sie IDin jedem Selektor Folgendes angeben : $('#divId > input, #divId > select, #divId > textarea'); Auch das >Symbol , auf das es sich bezieht, bezieht sich auf direkte untergeordnete Elemente ... Sehr ungewöhnlich in diesem Szenario oder zumindest sehr restriktiv.

GVO

jQuery, um nur Elemente innerhalb eines Div zu serialisieren

Antworten:

serializealle Formelemente innerhalb eines div.

`serialize`alle Formelemente innerhalb eines `div`.