Question

我试图找到所有表单输入元素并迭代它们，遗憾的是Each迭代器不起作用。我检查了$inputs变量，其中有5个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home Page - My ASP.NET MVC Application</title>
    <script src="/Scripts/jquery-1.9.1.js"></script>
</head>
<body>


<script>
$(document).on('click', '#test-endpoint', function () {
    var $form = $(this).parents('#test-form').first();
    var $inputs = $form.find('input, textarea');

    $inputs.each(function () {
    //The code never executed
    });
}
</script>

<form action="http://do.convertapi.com/Word2Pdf" method="post" accept-charset="utf-8" enctype="multipart/form-data" id="test-form">

    <input type="button" name="submitButton" id="test-endpoint" value="Submit1">

    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">Endpoints</h3>
        </div>
        <div class="panel-body">
            POST   http://do.convertapi.com/Word2Pdf
        </div>
    </div>


    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">Authentication</h3>
        </div>
        <div class="panel-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Description</th>
                        <th>Authentication</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <strong>ApiKey</strong>
                            <p>Optional</p>
                        </td>
                        <td>
                            <strong>String</strong>
                            <p>API Key should be passed if you purchased membership with credits. Please login to your control panel to find out your API Key http://www.convertapi.com/a</p>
                        </td>
                        <td>
                            <input type="text" name="ApiKey" placeholder="Optional">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">Parameters</h3>
        </div>
        <div class="panel-body">

            <table class="table">
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Description</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                        <tr>
                            <td>
                                <strong>File</strong>
                                <p>Required</p>
                            </td>
                            <td>
                                <strong>Binary</strong>
                                <p>Supported source file formats.</p>
                            </td>
                            <td>
                                    <input type="file" name="File">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <strong>DocumentTitle</strong>
                                <p>Optional</p>
                            </td>
                            <td>
                                <strong>String</strong>
                                <p>Set the title of the generated Pdf file. If value is not set a source document title is used instead.</p>
                            </td>
                            <td>
                                    <input type="text" name="DocumentTitle" placeholder="Optional">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <strong>DocumentSubject</strong>
                                <p>Optional</p>
                            </td>
                            <td>
                                <strong>String</strong>
                                <p>Set the subject of the generated Pdf file. If value is not set a source document subject is used instead.</p>
                            </td>
                            <td>
                                    <input type="text" name="DocumentSubject" placeholder="Optional">
                            </td>
                        </tr>
                </tbody>
            </table>

        </div>
    </div>

    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">Output</h3>
        </div>
        <div id="test-output" class="panel-body">
        </div>
    </div>

</form>

</body>
</html>

我使用jQuery 1.9.1

Answer 1

尝试使用$(document).ready()围绕它，例如：

$(document).ready( function() {

  var $form = $(this).parents('#test-form').first();
  var $inputs = $form.find('input, textarea');

  $inputs.each(function () {
    //The code never executed
  });

});

当您调用.each时，可能您的元素不存在？

Answer 2

您遗失了)

$(document).on('click', '#test-endpoint', function () {
    var $form = $'#test-form');
    var $inputs = $form.find('input, textarea');

    console.log($inputs.get());

    $inputs.each(function () {
        console.log(this)
    //The code never executed
    });
});//missing ) here

演示：Fiddle

Answer 3

引用的代码有语法错误，我无法看到$inputs有什么内容：

$(document).on('click', '#test-endpoint', function () {
    var $form = $(this).parents('#test-form').first();
    var $inputs = $form.find('input, textarea');

    $inputs.each(function () {
      alert("Got: " + this.tagName);
    });
}  // <================= Missing ); here

Here's your original code live，它不起作用。

Here's a copy with ); added，它确实有用。

在您的网络控制台中，会出现错误：

Uncaught SyntaxError: Unexpected end of input

Answer 4

以下是完整代码：

var $form = $(this).parents('#test-form').first();
var $inputs = $form.find('input, textarea');

$inputs.each(function (  idx, value) {
//The code never executed
});

每个都没有处理元素数组

4 个答案: