遍历 div 内的输入答案

【问题标题】：Iterate through inputs inside of a div遍历 div 内的输入
【发布时间】：2014-08-28 10:59:12
【问题描述】：

我正在尝试遍历通过 jQuery 放置在特定 div 上的所有输入，但没有响应。我无法使用警报查看输入的值。我究竟做错了什么？

<form id="internshipStage2Form" method="POST" action="form2.php">
    <center>
        <table id="studentInformation" border="1">
            <caption style="color:#f00;">Student(Trainee) Information</caption>
            <tr>
                <td valign="middle" align="center">
                    <label id="stuEmailLabel" for="stuEmailText">E-mail Address</label>
                </td>
                <td valign="middle" align="center"><?php echo $email; ?></td>
            </tr>
            <tr>
                <td valign="middle" align="center">
                    <label id="stuPhoneLabel" for="stuPhoneText">Phone</label>
                </td>
                <td><input id="stuPhoneText" type="text" name="stuPhoneText"/></td>
            </tr>
        </table>
        <div id="companyInfo">
            <table id="companyInformation" border="1">
                <caption style="color:#f00;">Company Information</caption>
                <tr>
                    <td valign="middle" align="center">
                        <label id="companyNameLabel" for="companyNameText">Company Name</label>
                    </td>
                    <td><input id="companyNameText" type="text" name="companyNameText"/></td>
                </tr>
                <tr>
                    <td valign="middle" align="center">
                        <label id="companyAdressLabel" for="companyAdressText">Address</label>
                    </td>
                    <td><input id="companyAdressText" type="text" name="companyAdressText"/></td>
                </tr>
                <tr>
                    <td valign="middle" align="center">
                        <label id="companyPhoneLabel" for="companyPhoneText">Phone</label>
                    </td>
                    <td><input id="companyPhoneText" type="text" name="companyPhoneText"/></td>
                </tr>
                <tr>
                    <td valign="middle" align="center">
                        <label id="" for="">Did the any students work as trainees in the company in the previous years?</label>
                    </td>
                    <td valign="middle" align="center">
                        Yes<input id="g1Positive" type="radio" name="g1" value="YES"/>
                        No<input id="g1Negative" type="radio" name="g1" value="NO"/>
                    </td>
                </tr>
            </table>
        </div>
        <h4 style="color:#f00;">
            I agree the terms.
        </h4>
        <input id="stuDecCheckBox" type="checkbox" name="stuDecCheckBox" /></br>
        <input id="sendButton" type="submit" name="sendButton2" value="SEND FOR APPROVEMENT"/>
    </center>
</form>

JS

$('#companyInfo').children('input').each(function () {
    alert(this.value);
});

如有任何帮助，将不胜感激。

【问题讨论】：

值得指出的是，<center> element is (long) deprecated and obsolete 在 HTML 4 中也不少。

标签： javascript jquery html loops iteration

【解决方案1】：

您的输入不是#companyInfo 的子级。只需这样做：

$('#companyInfo input').each(function () {
    alert(this.value);
});

【讨论】：

【解决方案2】：

您可以使用find 方法，该方法在任何级别查找嵌套元素：

$('#companyInfo').find('input').each(function () {
    alert(this.value);
});

http://jsfiddle.net/geLq4/

【讨论】：

【解决方案3】：

inputs 不是#companyInfo 的直接后代。 Try this 改为：

$('#companyInfo input').each(function () {
    console.log($(this).val());
});

【讨论】：

【解决方案4】：

来自jQuery documentation：

.children() 方法与 .find() 的不同之处在于 .children() 仅在 DOM 树中向下移动一层

类是快速实现多元素操作的好方法。

Yes<input class="radioInput" id="g1Positive" type="radio" name="g1" value="YES"/>
No<input class="radioInput" id="g1Negative" type="radio" name="g1" value="NO"/>

然后使用 .each 按类进行迭代：

$(document).ready(function() {
    $('body').on('click', '#sendButton', function() {
        $(' .radioInput ').each(function() {
            alert(this.value);
        });
    });
});

还有一个jsfiddle 给你。祝你好运。

【讨论】：

【解决方案5】：

你可以用这个：

 var baseInfosInputs = [];
 $("#baseInfos :input, #baseInfos :selected").each(function() {
     baseInfosInputs += this.value;
 });

如果要将它们推入数组或对象，请使用：

baseInfosInputs.push(this.value);

【讨论】：