希望始终填写第一个空输入字段。继续填写第一个字段答案

【问题标题】：Want to always fill the first empty input field. Keeps filling the first field希望始终填写第一个空输入字段。继续填写第一个字段
【发布时间】：2018-07-13 09:00:59
【问题描述】：

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

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

【解决方案1】：

为了代码最小化，如果可能的话，我会尝试在一行中选择和更新一个元素。所以我选择了第一个输入，然后过滤它。

编辑：哈！好吧，完全误解了这个问题。感谢您的提醒。重写以对列表进行排序并找到第一个空输入并填充它。

$('input').each(function(){
     if ( $(this).val() == '' ){
          $(this).val('filled');
          return false;
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="field" value="i have a value" /><br/>
<input class="field" value="so do i" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>

【讨论】：

如果您在循环中运行它，这将不起作用。在此代码中，首先:first 选择第一个输入，然后然后 .filter 决定是保持选中还是丢弃该单个输入，具体取决于它是否具有值。所以在第一个循环中它会设置第一个input，在随后的循环中它什么也不做。
可能误解了这个问题。我以为他只想要第一个输入，如果它是空的就可以填充。所以我完全抛弃了循环。

【解决方案2】：

jQuery 的 :empty selector 不会像您想象的那样选择空的 inputs。相反，它意味着该元素没有子元素。这是您示例中所有 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/>

【讨论】：

【解决方案3】：

empty 选择器 (https://api.jquery.com/empty-selector/) 只选择没有子节点的元素（包括文本）。这意味着始终选择您的第一个输入字段，无论其值如何。这应该有效（如果您的编号循环不相关）：

$("input.field").each(function() {
    if ($(this).val == '') {
        $(this).val('filled');
        return false;
    }
})

注意：jQuery 元素是按文档顺序排列的，因此它应该始终按照它们在文档中出现的顺序填充第一个空输入。

【讨论】：