jQuery для сериализации только элементов в div


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
Очевидно, что это также сериализует только входные данные, поэтому комментарий Дэвида Мердокса будет правильным способом сделать это.
superphonic

2
jQuery: «Поскольку: input является расширением jQuery, а не частью спецификации CSS, запросы, использующие: input, не могут воспользоваться преимуществом повышения производительности, обеспечиваемого собственным методом DOM querySelectorAll ()». использование $ ('[name]') будет лучше: document.querySelectorAll ('[name]');
Абдулла Айдын

22

Вы можете повысить скорость своего кода, если ограничите элементы, на которые будет смотреть jQuery.

Для этого используйте селектор : input вместо * .

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

Это ускорит ваш код, потому что список элементов короче.


15

serializeвсе элементы формы в 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 ('ввод'). сериализовать ()


6
Это не приведет к сериализации выбранных элементов и текстовых полей в div
Джефф Уокер Code Ranger

Это исправляет проблему выбора и текстового поля: <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.