jquery - 希望始终填写第一个空白输入字段。不断填补第一个领域

尝试填充一系列输入字段，以便始终填充第一个空输入。代码似乎总是会填充第一个输入...任何想法？

jQuery(document).ready(function() {
  for (i = 0; i < 4; i++) {
    $('.field:empty:first').val(i);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>

最佳答案

jQuery的:empty selector不会像您想的那样选择空的input。而是意味着该元素没有子元素。在您的示例中，所有input元素都是这种情况。然后:first selector在每个循环中选择第一个元素。

Intead，您can use .filter()查找具有空值后跟.first()的字段：

var emptyFields = $('.field').filter(function() { return $(this).val() === ""; });
emptyFields.first().val(i);

jQuery(document).ready(function() {
  for (i = 0; i < 4; i++) {
    var emptyFields = $('.field').filter(function() { return $(this).val() === ""; });
    emptyFields.first().val(i);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>