Цикл по элементам в 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
Любые подсказки о том, как правильно выполнить цикл?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
jQuery имеет отличную функцию для циклического перебора набора элементов: .каждый()
$('#formId').children().each(
function(){
//access to form element via $(this)
}
);
У меня не работает, см. Мою редакцию вопроса. Дальнейшие идеи?
Форма, скорее всего, будет иметь абзац или что-то подобное в качестве своего дочернего элемента. Вам нужно убедиться, что вы выбираете только элементы ввода.
«children ()» получает все дочерние элементы DOM в форме, а не элементы.
не думайте, что вам нужны цитаты по этому поводу:
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. Было бы немного эффективнее сделать это только один раз, но разница будет незначительной.
Из многих предложений, которые я видел, это самый простой в реализации. Спасибо!
если вы хотите использовать каждую функцию, она должна выглядеть так:
$('#formId').children().each(
function(){
//access to form element via $(this)
}
);
Просто замените закрывающую фигурную скобку закрытой скобкой. Спасибо, что указали на это, Джобсскри, ты сэкономил мне время.
Почему вы разместили это как ответ, когда говорите, что просто отвечаете на jobscry? Это тот же код, который он опубликовал. Вот для чего нужны комментарии.
для меня все это не сработало. Для меня сработало кое-что действительно простое:
$("#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 в форме вместе с каждое поле выбора и текстовое поле на странице.
На самом деле он так себя ведет ... Использование этого точного формата в JSFiddle фактически привело только к отображению только select и textarea. Добавление запятой перед словом «ввод» приводит к тому, что вы говорите.
Действительно? Причина jsfiddle.net/UDD7E/3 показывает именно то, о чем я говорил. Оба поля выбора и оба текстовых поля красные, хотя одно из них находится за пределами формы.
Интересно, у меня разные результаты. Может быть, это потому, что я запустил его по нажатию кнопки. Очень странный. Я бы бросил скрипку, но это уже не имеет значения.
Только что заметил правку. Новый код должен работать лучше, поскольку вы захватываете форму и запрашиваете ее (что ограничивает запрос так, как не делал другой код). Приведенный выше код все еще не работает, и вы, возможно, захотите от него избавиться, но, по крайней мере, у вас есть кое-что, что теперь работает. :)
Как он до сих пор сломан? Дж / нед
Он все еще не работает, потому что запятые разделяют селекторы. form[name=formname] input, select, textarea означает «все input в форме formname, плюс все select, плюс все textarea». Вы могли бы сказать $('input, select, textarea', 'form[name=formname]') и заставить его работать; Я забываю, позволяет ли jQuery это делать или заставляет использовать элемент или объект jQuery в качестве контекста.
О, вы все еще смотрите на верхние старые вещи ... Это правка внизу, которая работает и находится в JSFiddle
Да .. вот что я говорил. Нижняя часть работает. Приведенный выше код, вероятно, следует удалить, так как он неверен.
Ваш поток только что сэкономил мне 20 минут построчного ввода полей для нескольких форм -_- ;. +1.