Javascript 循环输入字段；两次迭代后停止

我有五个表单字段，它们最初不会预先填充任何值

如果用户填写其中一个字段，则下次访问表单时，该字段将预先填充上一次访问的值

下面是我正在尝试的：我想创建一个循环，循环遍历字段。它将始终检查是否有空字段。找到2个空字段后，循环将停止，仅显示这2个空字段，而其他字段将隐藏

这是我到目前为止得到的…我只是不知道在遍历两个字段后如何停止

HTML:

JS:

$（文档）.ready（函数（）{
$（'input'）.hide（）；
var firstValue=$（'input[id=“first”]”）。val（），
secondValue=$（'input[id=“second”]”）。val（），
thirdValue=$（'input[id=“third”]”）。val（），
第四个值=$（'input[id=“fourth”]”）。val（），
第五个值=$（'input[id=“fifth”]”）。val（）；
var firstField=$（'input[id=“first”]'），
secondField=$（'input[id=“second”]”），
thirdField=$（'input[id=“third”]”），输入，
第四个字段=$（'input[id=“fourth”]”），
第五个字段=$（'input[id=“fifth”]”）；
var formValues=[firstValue、secondValue、thirdValue、fourthValue、fifthValue]；
var fieldIds=[firstField，secondField，thirdField，fourthField，fifthField]；
对于（变量i=0；i

$（文档）.ready（函数（）{
$（'input'）.hide（）.each（function（））{
var index=0；//初始化计数器
if（$（this.val（）.length）{//检查输入的长度
如果（指数<2）{
$（this.show（）；
index=index+1//或index++如果您愿意
}
否则{
打破
}
}
}
)};

如果要在符合条件的输入人群中包括

select

和

textarea

字段，请使用

$（':input'）.hide（）.each（…）

。如果页面上有多个表单，也要在选择器中包括这些表单：

$（'#预期的#u表单'）。查找（':input'）.hide（）。each（…）

---

获取所有输入字段，获取前两个空字段并显示它们；最后，获取该字段的补码以隐藏其余字段：

var $inputFields = $('form input:text'),
$emptyFields = $inputFields
  .filter(function() { return this.value == ''; })
  .slice(0, 2)
  .show();

$inputFields
  .not($emptyFields)
  .hide();

---

我认为Jack提供了最好的答案，但这也应该有效。在这里，我使用第二个计数器

j

，当

j%2==0

时中断循环，因此此时它发现了两个空字段。这被称为模或

模

运算符

$(document).ready(function() {
        $('input').hide();

        var firstValue = $('input[id="first"]').val(),
        secondValue    = $('input[id="second"]').val(),
        thirdValue     = $('input[id="third"]').val(),
        fourthValue    = $('input[id="fourth"]').val(),
        fifthValue     = $('input[id="fifth"]').val();

        var firstField = $('input[id="first"]'),
        secondField    = $('input[id="second"]'),
        thirdField     = $('input[id="third"]'),
        fourthField    = $('input[id="fourth"]'),
        fifthField     = $('input[id="fifth"]');

        var formValues = [firstValue, secondValue, thirdValue, fourthValue, fifthValue];
        var fieldIds = [firstField, secondField, thirdField, fourthField, fifthField];
        var j = 0;
        for (var i = 1; i < fieldIds.length; i++) {
            if ( formValues[i] === '' ) {
                fieldIds[i].show();
                j++;//we found an empty field
                if (j % 2 == 0)
                {
                    break;
                }
            }
        }
});

$（文档）.ready（函数（）{
$（'input'）.hide（）；
var firstValue=$（'input[id=“first”]”）。val（），
secondValue=$（'input[id=“second”]”）。val（），
thirdValue=$（'input[id=“third”]”）。val（），
第四个值=$（'input[id=“fourth”]”）。val（），
第五个值=$（'input[id=“fifth”]”）。val（）；
var firstField=$（'input[id=“first”]'），
secondField=$（'input[id=“second”]”），
thirdField=$（'input[id=“third”]”），输入，
第四个字段=$（'input[id=“fourth”]”），
第五个字段=$（'input[id=“fifth”]”）；
var formValues=[firstValue、secondValue、thirdValue、fourthValue、fifthValue]；
var fieldIds=[firstField，secondField，thirdField，fourthField，fifthField]；
var j=0；
对于（变量i=1；i

@jeromy french我能请你举个例子说明我在这种情况下如何使用.each（）？顺便说一句，使用

#first

而不是

输入[id=“first”]

。感谢您的发帖。查看您的代码示例绝对有意义……我将尝试一下。再次感谢！是的，您的答案和Jack的答案都非常有效。这一切都非常有用，感谢您指出模运算符的用法！

$(document).ready(function() {
    $('input').hide().each( function(){
        var index=0; //initilialize the counter
        if( $(this).val().length ){ //check for input's length
            if(index < 2) {
                $(this).show();
                index=index+1 //or index++ if you like
            }
            else {
                break;
            }
        }
    }
)};

var $inputFields = $('form input:text'),
$emptyFields = $inputFields
  .filter(function() { return this.value == ''; })
  .slice(0, 2)
  .show();

$inputFields
  .not($emptyFields)
  .hide();

$(document).ready(function() {
        $('input').hide();

        var firstValue = $('input[id="first"]').val(),
        secondValue    = $('input[id="second"]').val(),
        thirdValue     = $('input[id="third"]').val(),
        fourthValue    = $('input[id="fourth"]').val(),
        fifthValue     = $('input[id="fifth"]').val();

        var firstField = $('input[id="first"]'),
        secondField    = $('input[id="second"]'),
        thirdField     = $('input[id="third"]'),
        fourthField    = $('input[id="fourth"]'),
        fifthField     = $('input[id="fifth"]');

        var formValues = [firstValue, secondValue, thirdValue, fourthValue, fifthValue];
        var fieldIds = [firstField, secondField, thirdField, fourthField, fifthField];
        var j = 0;
        for (var i = 1; i < fieldIds.length; i++) {
            if ( formValues[i] === '' ) {
                fieldIds[i].show();
                j++;//we found an empty field
                if (j % 2 == 0)
                {
                    break;
                }
            }
        }
});