使用jQuery循环遍历元素

Question

我想循环遍历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

有关如何正确执行循环的任何提示吗？

- Christian Aichinger

---

你的线程刚刚为我节省了20分钟逐行输入多个表单字段的时间 -_-;. +1. - zeboidlund

Answer 1

不需要在这里加引号。

var child = $("this");

尝试：

var child = $(this);

- jobscry

Answer 2

jQuery拥有一个用于遍历一组元素的优秀函数：.each（）

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

- jobscry

---

对我不起作用，请查看我编辑的问题。还有其他想法吗？ - Christian Aichinger

表单很可能会有一个段落或类似的子元素。您需要确保仅选择输入元素。 - SpoonMeiser

"children()" 获取表单中所有的DOM子元素，而不是元素本身。 - mpemburn

Answer 3

根据您需要每个子项的目的（如果您想通过 AJAX 在某处发布它），您可以只需执行...

$("#formID").serialize()

它会自动为您创建包含所有值的字符串。

至于遍历对象，您也可以这样做。

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

- HBoss

Answer 4

我以前使用过以下内容：

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的对象，其中包含所有输入值。

请注意，您需要以一种特殊的方式处理复选框，以避免获取未选中复选框的值。单选框可能也是如此。

另外，请注意使用数组来存储值，因为对于一个输入名称，您可能会从多个输入（尤其是复选框）获得值。

- SpoonMeiser

---

你因为那个问题给我投了反对票吗？$(this)不是查找，而是用jQuery对象包装一个已有的对象。只执行一次可能会更有效率，但差别微乎其微。 - SpoonMeiser

在我看过的所有建议中，这是最容易实现的。谢谢！ - mpemburn

Answer 5

如果你想使用each函数，它应该长这样：

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

只需将右花括号换成右括号即可。感谢你指出这个问题，jobscry，你帮我节省了一些时间。

- Peter

---

当你说你只是回复“jobscry”时，为什么要将此作为答案发布？这是他发布的相同代码。这就是评论的用途。 - Shane Reustle

Answer 6

对我来说，这一切都不起作用。对我有效的是一些非常简单的东西：

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

- bicycle

Answer 7

这是访问表单元素并循环遍历的最简单方法。在每个函数中，您可以检查和构建任何您想要的内容。当构建对象时，请注意您需要在每个函数之外进行声明。

编辑 JSFIDDLE

以下代码可正常运行

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

- Scottzozer

---

$('#formId input, select, textarea') 将返回表单中的所有 input 元素，以及页面中的每个选择框和文本域。 - cHao

它实际上并不像那样表现......在JSFiddle中使用完全相同的格式实际上只会导致选择和文本区域回显。在“input”前面添加逗号会得到你所说的结果。 - Scottzozer

真的吗？因为http://jsfiddle.net/UDD7E/3/恰好展示了我所说的情况。即使其中一个选择框和一个文本区域在表单之外，但它们都是红色的。 - cHao

有趣的是，我得到了不同的结果。也许是因为我在按钮点击时启动了它。非常奇怪。我本来想放一个 fiddle 的，但现在已经无所谓了。 - Scottzozer

刚刚注意到编辑。新代码应该更好，因为你正在获取表单并查询它（这种方式限制了查询，而其他代码没有）。上面的代码仍然有问题，你可能想要摆脱它，但至少现在你有一个可以工作的东西。 :) - cHao