jQuery, aby serializować tylko elementy w ramach elementu div


111

Chciałbym uzyskać taki sam efekt jak jQuery.serialize()ale chciałbym zwrócić tylko elementy potomne danego div.

Przykładowy wynik:

single=Single2&multiple=Multiple&radio=radio1

Odpowiedzi:


277

Nie ma problemu. Po prostu użyj następujących. Będzie to zachowywać się dokładnie tak, jak serializowanie formularza, ale zamiast tego używa się zawartości elementu div.

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

Sprawdź https://jsbin.com/xabureladi/1, aby zobaczyć demonstrację ( https://jsbin.com/xabureladi/1/edit, aby uzyskać kod)


58
Czy nie $("#divId").find("select, textarea, input").serialize();byłoby lepszej wydajności? Wyobrażam sobie, że powyższe mogłoby działać wolno, gdyby element div miał wiele elementów, na przykład tabelę z kilkoma wierszami / kolumnami.
David Murdoch,

3
Jak podano w innych odpowiedziach, $ ('# divId: input'). Serialize () byłaby bardziej wydajna.
fontanna

2
@EaterOfCorpses to niezbyt dokładny sposób testowania. Jeśli zmienisz kolejność instrukcji, zauważysz, że tak naprawdę nie ma żadnej różnicy: jsfiddle.net/QAKjN/10 . W grze jest więcej niż selekcjonerzy
Rondel

2
Oczywiście to również serializuje tylko dane wejściowe, więc komentarz Davida Murdochsa byłby właściwym sposobem zrobienia tego.
superphonic

2
jQuery: "Ponieważ: input jest rozszerzeniem jQuery i nie jest częścią specyfikacji CSS, zapytania używające: input nie mogą korzystać ze zwiększenia wydajności zapewnianego przez natywną metodę DOM querySelectorAll ()." użycie $ ('[nazwa]') będzie lepsze: document.querySelectorAll ('[nazwa]');
Abdullah Aydın

22

Możesz zwiększyć szybkość swojego kodu, jeśli ograniczysz elementy, na które będzie patrzeć jQuery.

Aby to osiągnąć, użyj selektora : input zamiast * .

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

Dzięki temu Twój kod będzie szybszy, ponieważ lista elementów jest krótsza.


15

serializewszystkie elementy formy w pliku div.

Możesz to zrobić, kierując element div #target-div-idwewnątrz swojego formza pomocą:

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

5

Funkcja, której obecnie używam:

/**
 * 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
Również .find ('[nazwa]'). Serialize (); może służyć do filtrowania elementów możliwych do serializacji.
Abdullah Aydın

3

Spróbuj także tego:

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


6
To nie spowoduje serializacji wybranych elementów i obszarów tekstowych w div
Jeff Walker Code Ranger

To rozwiązuje problem z zaznaczaniem i obszarem tekstowym: <code> $ ("# divId"). Find ("select, textarea, input"). Serialize (); <// code>
TroySteven

3

A co z moim rozwiązaniem:

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

Jeśli te elementy mają wspólną nazwę klasy, można również użyć tego:

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

W ten sposób można uniknąć wybierania przycisków, które zostaną wybrane za pomocą selektora jQuery :input. Chociaż można tego również uniknąć, używając$('#your_div :input:not(:button)').serialize();


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

1
Jeśli używany jest przecinek, musisz określić IDw każdym selektorze, na przykład $('#divId > input, #divId > select, #divId > textarea'):; Również >symbol odnosi się do bezpośrednich elementów dziecięcych ... Bardzo nietypowe w tym scenariuszu lub przynajmniej bardzo restrykcyjne.
gmo
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.