jQuery 从 $("input") 数组中获取输入值（）答案

【问题标题】：jQuery get input val() from $("input") arrayjQuery 从 $("input") 数组中获取输入值（）
【发布时间】：2015-09-25 17:57:29
【问题描述】：

我有一个函数可以返回表单中的每个文本输入是否都有值。

当我第一次制作这个函数时，它看起来像这样：

function checkInput(inputId) {
check = 0;          //should be 0 if all inputs are filled out
for (var i=0; i < arguments.length; i++) {   // get all of the arguments (input ids) to check
    var iVal = $("#"+arguments[i]).val();

  if(iVal !== '' && iVal !== null) {
    $("#"+arguments[i]).removeClass('input-error');
  }
  else {
    $("#"+arguments[i]).addClass('input-error');
    $("#"+arguments[i]).focus(function(){
      $("input").removeClass('input-error');
      $("#"+arguments[i]).off('focus');
    });
  check++;
  }

}

  if(check > 0) {
    return false; // at least one input doesn't have a value
  }
  else {
    return true; // all inputs have values
  }

}

这很好用，但是当我调用该函数时，我必须包括（作为一个 arstrong 文本文件）我想要检查的每个输入的 id：checkInput('input1','input2','input3')。

现在我试图让我的函数检查页面上的每个输入，而不必包含每个输入 id。

这是我目前所拥有的：

function checkInput() {
  var inputs = $("input");
  check = 0;
    for (var i=0; i < inputs.size(); i++) {
      var iVal = inputs[i].val();

  if(iVal !== '' && iVal !== null) {
    inputs[i].removeClass('input-error');
  }
  else {
    inputs[i].addClass('input-error');
    inputs[i].focus(function(){
      $("input").removeClass('input-error');
      inputs[i].off('focus');
    });
  check++;
  }

}

if(check > 0) {
  return false;
}
else {
  return true;
}

}

当我调用该函数时，它会返回此错误：

未捕获的类型错误：inputs[i].val 不是函数

我做错了什么？

【问题讨论】：

标签： javascript jquery arrays input

【解决方案1】：

当你输入[i] 时，这会返回一个 html 元素，因此它不再是一个 jquery 对象。这就是它不再具有该功能的原因。

尝试用 $() 之类的 $(inputs[i]) 包装它以获取 jquery 对象，然后调用 .val() 之类的：

 $(inputs[i]).val()

如果要在 for 循环中使用它，只需将其设置为变量：

var $my_input = $(inputs[i])

然后继续在循环中使用它与您的其他方法：

$my_input.val()
$my_input.addClass()

等等。

【讨论】：

谢谢。它按照我现在想要的方式工作。你是第一个回复的，所以我会给你打勾。
感谢@phprunner，理解这一点将对您未来的jquery代码有很大帮助。祝你好运。

【解决方案2】：

如果你使用 jquery .each() 函数，你可以做得更干净一点：

$(document).ready(function() {
    $('.submit').on('click', function() {
        $('input').each(function() {
            console.log('what up');
            if($(this).val().length < 1 ) {
                $(this).addClass('input-error');
            }
            else {
                $(this).removeClass('input-error');
            }
        });
    });
});

.input-error {
    background-color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<br/>
<a href="#" class="submit">SUBMIT</a>

【讨论】：

【解决方案3】：

这实际上是一个非常简单的修复。您需要将 jquery 对象包装在 jquery 构造函数$()

比如inputs[i].val()到$(inputs[i]).val();

这是完整的工作示例：

http://jsbin.com/sipotenamo/1/edit?html,js,output

希望有帮助！

【讨论】：

【解决方案4】：

这正是.eq() 方法的用途之一。不要使用inputs[i]，而是使用以下内容：

// Reduce the set of matched elements to the one at the specified index.
inputs.eq(i)

给定一个表示一组 DOM 元素的 jQuery 对象，.eq() 方法从该集合中的一个元素构造一个新的 jQuery 对象。提供的索引标识该元素在集合中的位置。

【讨论】：

【解决方案5】：

在这种情况下，我将使用jQuery.each() 函数循环遍历表单元素。这将是修改后的代码

function checkInput() {
        var $inputs = $("input"),
            check = 0;
        $inputs.each(function () {
            val = $.trim($(this).val());
            if (val) {
                $(this).removeClass('input-error');
            }
            else {
                $(this).addClass('input-error');
                $(this).focus(function () {
                    $("input").removeClass('input-error');
                    $(this).off('focus');
                });
                check++;
            }
        });
        return check == 0;
    }

【讨论】：