jquery - 想要始终填充第一个空输入字段。继续填写第一个字段

Question

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

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/>

Answer 1

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

相反，你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/>