jQuery para serializar solo elementos dentro de un div


111

Me gustaría obtener el mismo efecto que, jQuery.serialize()pero me gustaría devolver solo los elementos secundarios de un determinado div.

Resultado de la muestra:

single=Single2&multiple=Multiple&radio=radio1

Respuestas:


277

No hay problema. Solo usa lo siguiente. Esto se comportará exactamente como serializar un formulario, pero usando el contenido de un div.

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

Consulte https://jsbin.com/xabureladi/1 para ver una demostración ( https://jsbin.com/xabureladi/1/edit para ver el código)


58
¿No $("#divId").find("select, textarea, input").serialize();obtendría un mejor rendimiento? Me imagino que lo anterior podría volverse lento si el div tuviera muchos elementos, como una tabla con varias filas / columnas.
David Murdoch

3
Como se enumera en otras respuestas, $ ('# divId: input'). Serialize () sería más eficiente.
jfountain

2
@EaterOfCorpses esa no es una forma muy precisa de probar. Si cambia el orden de las declaraciones, notará que realmente no hay ninguna diferencia: jsfiddle.net/QAKjN/10 . Hay más en juego que los selectores
Rondel

2
Claramente, esto también solo serializa las entradas, por lo que el comentario de David Murdochs sería la forma correcta de hacerlo.
superfónico

2
jQuery: "Debido a que: input es una extensión de jQuery y no forma parte de la especificación CSS, las consultas que usan: input no pueden aprovechar el aumento de rendimiento proporcionado por el método nativo DOM querySelectorAll ()". usar $ ('[nombre]') será mejor: document.querySelectorAll ('[nombre]');
Abdullah Aydın

22

Puede mejorar la velocidad de su código si restringe los elementos que jQuery verá.

Utilice el selector : entrada en lugar de * para lograrlo.

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

Esto hará que su código sea más rápido porque la lista de elementos es más corta.


15

serializetodos los elementos de formulario dentro de a div.

Podrías hacerlo apuntando al div #target-div-iddentro de tu formusando:

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

5

La función que uso actualmente:

/**
 * 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
También .find ('[nombre]'). Serialize (); se puede utilizar para filtrar elementos 'serializables'.
Abdullah Aydın

3

Prueba también esto:

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


6
Esto no serializará elementos seleccionados y áreas de texto en el div
Jeff Walker Code Ranger

Esto corrige el problema de selección y área de texto: <code> $ ("# divId"). Find ("select, textarea, input"). Serialize (); <// código>
TroySteven

3

¿Qué pasa con mi solución?

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

Si esos elementos tienen un nombre de clase común, también se puede usar esto:

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

De esta manera, puede evitar la selección de botones, que se seleccionarán con el selector de jQuery :input. Aunque esto también se puede evitar usando$('#your_div :input:not(:button)').serialize();


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

1
Si se usa una coma, entonces debe especificar IDen cada selector, como $('#divId > input, #divId > select, #divId > textarea'):; Además, el >símbolo hace referencia a elementos hijos directos ... Muy inusual en este escenario o al menos, muy restrictivo.
gmo
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.