jQuery untuk membuat serialisasi hanya elemen dalam div

111

Saya ingin mendapatkan efek yang sama seperti jQuery.serialize()tetapi saya hanya ingin mengembalikan elemen anak yang diberikan div.

Hasil sampel:

single=Single2&multiple=Multiple&radio=radio1
BrokeMyLegBiking
sumber

Jawaban:

277

Tidak masalah. Cukup gunakan yang berikut ini. Ini akan berperilaku persis seperti serialisasi formulir tetapi menggunakan konten div sebagai gantinya.

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

Periksa https://jsbin.com/xabureladi/1 untuk demonstrasi ( https://jsbin.com/xabureladi/1/edit untuk kode)

naik opelet
sumber
58
Bukankah kamu akan $("#divId").find("select, textarea, input").serialize();menghasilkan kinerja yang lebih baik? Saya membayangkan hal di atas bisa menjadi lambat jika div memiliki banyak elemen, seperti tabel dengan beberapa baris / kolom.
David Murdoch
3
Seperti yang tercantum dalam jawaban lain, $ ('# divId: input'). Serialize () akan lebih efisien.
jfountain
2
@EaterOfCorpses itu bukan cara yang sangat akurat untuk menguji. Jika Anda mengganti urutan pernyataan, Anda akan melihat bahwa sebenarnya tidak ada perbedaan apa pun: jsfiddle.net/QAKjN/10 . Ada lebih banyak permainan daripada penyeleksi
Rondel
2
Jelas ini juga hanya masukan serialisasi, jadi komentar David Murdoch akan menjadi cara yang tepat untuk melakukannya.
superfonik
2
jQuery: "Karena: input adalah ekstensi jQuery dan bukan bagian dari spesifikasi CSS, kueri yang menggunakan: input tidak dapat memanfaatkan peningkatan kinerja yang disediakan oleh metode native DOM querySelectorAll ()." menggunakan $ ('[name]') akan lebih baik: document.querySelectorAll ('[name]');
Abdullah Aydın
22

Anda dapat meningkatkan kecepatan kode Anda jika Anda membatasi item yang akan dilihat jQuery.

Gunakan selector : input, bukan * untuk mencapainya.

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

Ini akan membuat kode Anda lebih cepat karena daftar item lebih pendek.

ThiagoPXP
sumber
15

serializesemua elemen bentuk dalam a div.

Anda dapat melakukannya dengan menargetkan div #target-div-iddi dalam formpenggunaan Anda :

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

Fungsi yang saya gunakan saat ini:

/**
 * 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
sumber
2
Juga .find ('[name]'). Serialize (); dapat digunakan untuk memfilter elemen 'serializable'.
Abdullah Aydın
3

Coba juga ini:

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

Alberto Buschettu
sumber
6
Ini tidak akan membuat serial elemen dan area teks terpilih di div
Jeff Walker Code Ranger
Ini memperbaiki masalah pemilihan dan textarea: <code> $ ("# divId"). Find ("select, textarea, input"). Serialize (); <// code>
TroySteven
3

Bagaimana dengan solusi saya:

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

Briganti
sumber
0

Jika elemen tersebut memiliki nama kelas yang sama, seseorang juga dapat menggunakan ini:

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

Dengan cara ini Anda dapat menghindari pemilihan tombol, yang akan dipilih menggunakan selektor jQuery :input. Padahal ini juga bisa dihindari dengan menggunakan$('#your_div :input:not(:button)').serialize();

Yogesh Mistry
sumber
0
$('#divId > input, #divId > select, #divId > textarea').serialize();
jefissu
sumber
1
Jika koma digunakan, maka Anda perlu menentukan IDdi setiap selektor, seperti $('#divId > input, #divId > select, #divId > textarea'):; Juga, >simbol itu mengacu pada elemen anak langsung ... Sangat tidak biasa dalam skenario ini atau setidaknya, sangat membatasi.
gmo