JQuery .each循环问题

Question

好的，这是想法：

我希望制作一个jQuery脚本来处理多个表单。每个表单都有一个按钮。当点击此按钮时，脚本应将所有输入字段的名称和值发送到表单操作URL中的$ _POST。但是我无法使其工作。

在我的jQuery文件中，它不会通过第3行的.each循环。

jQuery：

$("input[type='button']").click(function(){
    var query = {};
    $(this).parent('form').children('input[type="text"]').each(function(){
        query[$(this).attr('name')] = $(this).val();
    });

    $.post($(this).parent('form').attr('action'), query, function(data) {
        $("#dialog").html(data);
        $("#ui-id-1").html('Activate account');
        $("#dialog").dialog("open");
    }, 'json');
});

HTML:

<form action="/action/activateacc.php">
<table>
    <tr>
        <td>E-mail:</td>
        <td><input type="text" id="mail" name="mail" /></td>
        <td><img class="tick" id="mailIMG" width="20px" /></td>
    </tr>
    <tr>
        <td>Activation code:</td>
        <td><input type="text" id="code" name="code" /></td>
        <td><img class="tick" id="codeIMG" width="20px" /></td>
    </tr>
    <tr>
        <td>Choose organization-name:</td>
        <td><input type="text" id="name" name="name" /></td>
        <td><img class="tick" id="nameIMG" width="20px" /></td>
    </tr>
    <tr>
        <td></td>
        <td style="text-align:center"><input type="button" style="cursor:pointer" value="Activate account" /></td>
    </tr>
 </table>
 </form>

- CoBolt

Answer 1

只需使用表单的.serialize()方法获取输入框的名称和值-此外，您应该使用closest而不是parent，因为parent只能向上一级。

$("input[type='button']").click(function(){   
    var query = $(this).closest('form').serialize();
    $.post($(this).parent('form').attr('action'), query , function(data) {
        $("#dialog").html(data);
        $("#ui-id-1").html('Activate account');
        $("#dialog").dialog("open");
    }, 'json');
});

- wirey00

Answer 2

.parent() 只能向上遍历 DOM 树一级 - 请尝试使用 .closest() 和 find() 方法 - 这样可以更好地解决问题。

$(this).closets('form').find('input[type="text"]').each(function(){

- Manse

Answer 3

使用.find查找子元素，使用.parents查找表单。

$(this).parents('form').find('input[type="text"]').each(function(){
        query[$(this).attr('name')] = $(this).val();
    });

- Anton

Answer 4

对我来说最简单的方法是使用.closest()（它会一直向上，而不是只到父级）和find()（它会在当前jQuery对象中运行查询）：

$(this).closest('form').find('input[type="text"]').each(function(){ 
    query[$(this).attr('name')] = $(this).val();
});

jsFiddle演示

- Mark Pieszak - Trilon.io

Answer 5

parent() 方法只能向上遍历 DOM 树一层，而 children() 方法只能向下遍历 DOM 树一层。

如果你能够确定文档结构不会改变，可以考虑多次使用这两个方法（但并不推荐，因为代码不够简洁）。或者，你可以使用 closest() 方法，在 DOM 树中查找最接近给定标签名的元素。

- Naryl

Answer 6

您可以通过使用内置的$.serialize方法，避免将您的form元素序列化为查询字符串而带来的麻烦。

.serialize()方法会创建一个标准的URL编码格式的文本字符串。它作用于一个代表一组表单元素的jQuery对象。

在您的情况下：

var query = $(this).closest('form').serialize();

- Mattias Buelens