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

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

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

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

Answer 2

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

Answer 3

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

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

$('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/>

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

3 个答案: