jQuery для серіалізації лише елементів у розділі


111

Я хотів би отримати такий же ефект, як jQuery.serialize()і я, але хотів би повернути лише дочірні елементи div.

Зразок результату:

single=Single2&multiple=Multiple&radio=radio1

Відповіді:


277

Нема проблем. Просто використовуйте наступне. Це буде поводитись так само, як серіалізувати форму, але використовувати вміст div.

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

Перевірте https://jsbin.com/xabureladi/1 на демонстрацію ( https://jsbin.com/xabureladi/1/edit для коду)


58
Не вдалося б $("#divId").find("select, textarea, input").serialize();досягти кращої продуктивності? Я гадаю, що вищезгадане могло б стати повільним, якби в div було багато елементів, як таблиця з кількома рядками / стовпцями.
Девід Мердок

3
Як зазначено в інших відповідях, $ ('# divId: input'). Serialize () було б більш ефективним.
jfountain

2
@EaterOfCorpses це не дуже точний спосіб тестування. Якщо ви переключите порядок висловлювань, то помітите, що насправді немає різниці: jsfiddle.net/QAKjN/10 . У грі більше, ніж у селекторів
Рондел

2
Зрозуміло, що це також лише серіалізує матеріали, тому коментар Девіда Мердока був би правильним способом зробити це.
суперфонічний

2
jQuery: "Оскільки: вхід - це розширення jQuery і не є частиною специфікації CSS, запити, що використовують: введення, не можуть скористатися збільшенням продуктивності, що надається нативним методом DOM querySelectorAll ()." використання $ ('[ім'я]') буде краще: document.querySelectorAll ('[ім'я]');
Абдулла Айдін

22

Ви можете покращити швидкість свого коду, якщо обмежите пункти, на які буде дивитися jQuery.

Використовуйте селектор : введіть замість *, щоб досягти цього.

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

Це зробить ваш код швидшим, оскільки список елементів коротший.


15

serializeвсі елементи форми в межах a div.

Ви можете зробити це, орієнтуючись на div #target-div-idвсередині вашого formвикористання:

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

5

Функція, яку я зараз використовую:

/**
 * 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
Також .find ('[ім'я]'). Serialize (); може використовуватися для фільтрації "серіалізаційних" елементів.
Абдулла Айдін

3

Спробуйте також це:

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


6
Це не буде серіалізувати вибрані елементи та текстові тексти у розділі
Jeff Walker Code Ranger

Це виправляє проблему вибору та textarea: <code> $ ("# divId"). Find ("select, textarea, input"). Serialize (); <// code>
TroySteven

3

Як щодо мого рішення:

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

Якщо ці елементи мають загальну назву класу, ви також можете використовувати це:

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

Таким чином ви можете уникнути вибору кнопок, які будуть обрані за допомогою селектора jQuery :input. Хоча цього можна також уникнути, використовуючи$('#your_div :input:not(:button)').serialize();


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

1
Якщо використовується кома, вам потрібно вказати IDв кожному селекторі, наприклад $('#divId > input, #divId > select, #divId > textarea'):; Також >символ, яким він відноситься до прямих елементів дітей ... Дуже незвично в цьому сценарії або, принаймні, дуже обмежувальний.
gmo
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.