Цикл по элементам в jQuery

Я хочу перебрать элементы HTML-формы и сохранить значения полей <input> в объекте. Однако следующий код не работает:

function config() {
    $("#frmMain").children().map(function() {
        var child = $("this");
        if (child.is(":checkbox"))
            this[child.attr("name")] = child.attr("checked");
        if (child.is(":radio, checked"))
            this[child.attr("name")] = child.val();
        if (child.is(":text"))
            this[child.attr("name")] = child.val();
        return null;
    });

Не делает и следующее (вдохновленное ответом jobscry):

function config() {
    $("#frmMain").children().each(function() {
        var child = $("this");
        alert(child.length);
        if (child.is(":checkbox")) {
            this[child.attr("name")] = child.attr("checked");
        }
        if (child.is(":radio, checked"))
            this[child.attr("name")] = child.val();
        if (child.is(":text"))
            this[child.attr("name")] = child.val();
    });
}

Предупреждение всегда показывает, что child.length == 0. Выбор элементов вручную работает:

    
>>> $("#frmMain").children()
Object length=42
>>> $("#frmMain").children().filter(":checkbox")
Object length=3

Любые подсказки о том, как правильно выполнить цикл?

Ваш поток только что сэкономил мне 20 минут построчного ввода полей для нескольких форм -_- ;. +1.

zeboidlund 28.11.2011 22:22
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
27
1
107 303
7
Перейти к ответу Данный вопрос помечен как решенный

Ответы 7

jQuery имеет отличную функцию для циклического перебора набора элементов: .каждый()

$('#formId').children().each(
    function(){
        //access to form element via $(this)
    }
);

У меня не работает, см. Мою редакцию вопроса. Дальнейшие идеи?

Christian Aichinger 04.10.2008 16:23

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

SpoonMeiser 04.10.2008 22:00

«children ()» получает все дочерние элементы DOM в форме, а не элементы.

mpemburn 01.11.2013 18:13
Ответ принят как подходящий

не думайте, что вам нужны цитаты по этому поводу:

var child = $("this");

пытаться:

var child = $(this);

В зависимости от того, для чего вам нужен каждый ребенок (если вы хотите опубликовать его где-нибудь через AJAX), вы можете просто сделать ...

$("#formID").serialize()

Он автоматически создает для вас строку со всеми значениями.

Что касается перебора объектов, вы также можете это сделать.

$.each($("input, select, textarea"), function(i,v) {
    var theTag = v.tagName;
    var theElement = $(v);
    var theValue = theElement.val();
});

Раньше я использовал следующее:

var my_form = $('#form-id');
var data = {};

$('input:not([type=checkbox]), input[type=checkbox]:selected, select, textarea', my_form).each(
    function() {
        var name = $(this).attr('name');
        var val = $(this).val();

        if (!data.hasOwnProperty(name)) {
            data[name] = new Array;
        }

        data[name].push(val);
    }
);

Это просто записывается из памяти, поэтому может содержать ошибки, но при этом должен получиться объект с именем data, содержащий значения для всех ваших входных данных.

Обратите внимание, что вы должны обрабатывать флажки особым образом, чтобы избежать получения значений неотмеченных флажков. Вероятно, то же самое и с радиовходами.

Также обратите внимание на использование массивов для хранения значений, так как для одного имени входа у вас могут быть значения из нескольких входов (в частности, флажки).

Вы проголосовали за это? $ (this) не поиск, вы обертываете существующий объект с помощью объекта jQuery. Было бы немного эффективнее сделать это только один раз, но разница будет незначительной.

SpoonMeiser 09.10.2008 17:59

Из многих предложений, которые я видел, это самый простой в реализации. Спасибо!

mpemburn 01.11.2013 18:58

если вы хотите использовать каждую функцию, она должна выглядеть так:

$('#formId').children().each( 
  function(){
    //access to form element via $(this)
  }
);

Просто замените закрывающую фигурную скобку закрытой скобкой. Спасибо, что указали на это, Джобсскри, ты сэкономил мне время.

Почему вы разместили это как ответ, когда говорите, что просто отвечаете на jobscry? Это тот же код, который он опубликовал. Вот для чего нужны комментарии.

Shane Reustle 23.10.2010 22:52

для меня все это не сработало. Для меня сработало кое-что действительно простое:

$("#formID input[type=text]").each(function() {
alert($(this).val());
});

Это самый простой способ пройти через форму, имея доступ только к ее элементам. Внутри каждой функции вы можете проверить и построить все, что захотите. При создании объектов обратите внимание, что вы захотите объявить его вне каждой функции.

РЕДАКТИРОВАТЬ JSFIDDLE

Ниже будет работать

$('form[name=formName]').find('input, textarea, select').each(function() {
    alert($(this).attr('name'));
});

$('#formId input, select, textarea') вернет все элементы input в форме вместе с каждое поле выбора и текстовое поле на странице.

cHao 27.03.2013 00:22

На самом деле он так себя ведет ... Использование этого точного формата в JSFiddle фактически привело только к отображению только select и textarea. Добавление запятой перед словом «ввод» приводит к тому, что вы говорите.

Scottzozer 27.03.2013 16:17

Действительно? Причина jsfiddle.net/UDD7E/3 показывает именно то, о чем я говорил. Оба поля выбора и оба текстовых поля красные, хотя одно из них находится за пределами формы.

cHao 27.03.2013 18:19

Интересно, у меня разные результаты. Может быть, это потому, что я запустил его по нажатию кнопки. Очень странный. Я бы бросил скрипку, но это уже не имеет значения.

Scottzozer 27.03.2013 20:59

Только что заметил правку. Новый код должен работать лучше, поскольку вы захватываете форму и запрашиваете ее (что ограничивает запрос так, как не делал другой код). Приведенный выше код все еще не работает, и вы, возможно, захотите от него избавиться, но, по крайней мере, у вас есть кое-что, что теперь работает. :)

cHao 04.04.2013 20:10

Как он до сих пор сломан? Дж / нед

Scottzozer 05.04.2013 00:36

Он все еще не работает, потому что запятые разделяют селекторы. form[name=formname] input, select, textarea означает «все input в форме formname, плюс все select, плюс все textarea». Вы могли бы сказать $('input, select, textarea', 'form[name=formname]') и заставить его работать; Я забываю, позволяет ли jQuery это делать или заставляет использовать элемент или объект jQuery в качестве контекста.

cHao 05.04.2013 02:00

О, вы все еще смотрите на верхние старые вещи ... Это правка внизу, которая работает и находится в JSFiddle

Scottzozer 08.04.2013 23:28

Да .. вот что я говорил. Нижняя часть работает. Приведенный выше код, вероятно, следует удалить, так как он неверен.

cHao 08.04.2013 23:39

Другие вопросы по теме