代码之家 › 专栏 › 技术社区 › Christian Aichinger

在jquery中循环元素

jquery javascript

Christian Aichinger · 技术社区 · 16 年前

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

有关于如何正确执行循环的提示吗?

7 回复 | 直到 10 年前

Gert Grenander Keiron Lowe 12 年前

您不需要为此报价:

var child = $("this");

尝试:

var child = $(this);

Oded 13 年前

jquery具有出色的循环元素功能: .each()

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

hugoware 16 年前

根据你需要每个孩子做什么(如果你想通过Ajax把它发布到某个地方),你可以做…

$("#formID").serialize()

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

至于循环遍历对象,您也可以这样做。

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

SpoonMeiser 16 年前

我以前使用过以下内容:

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 它包含所有输入的值。

请注意,您必须以特殊的方式处理复选框,以避免获得未选中复选框的值。无线电输入也可能如此。

还要注意,使用数组存储值,对于一个输入名,您可能有来自多个输入的值(特别是复选框)。

Peter 15 年前

如果要使用每个函数,它应该如下所示:

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

只要把右括号换成右括号就行了。谢谢你指点我,乔布,你救了我一段时间。

bicycle 12 年前

对我来说这些都不管用。对我有效的是一些非常简单的事情:

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

-1

Scottzozer 12 年前

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

编辑 JSFIDDLE

下面就可以了

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