javascript - 如何统计选中元素的个数？

Question

我有很多使用相同类名的元素。现在我需要计算所选项目的数量。

例如像这样:(但是这个例子不能正常工作)

$("#btn").click(function(){
  if($(".necessarily").val() == ''){
    $(".necessarily").css('border','1px solid red');
  }
     // also I want the number of input.necessarily which are empty
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <form name="frm" action="#">
        <input name="first-name" class="necessarily" type="text" /><br><br>
        <input name="last-name" class="necessarily" type="text" /><br><br>
        <input name="email" class="necessarily" type="email" /><br><br>
        <input name="password" class="necessarily" type="password" /><br><br>
        <input name="address" class="anything" type="text" /><br><br>
        <input name="btn" id="btn"  type="submit" value="Register" />
    </form>

现在我想要那些为空的输入的数量...，我该如何计算？

Answer 1

.val() 方法返回集合中第一个元素的 .value 属性。您可以使用 .filter() 方法过滤空输入并读取过滤集合的 .length 属性:

var $empty = $(".necessarily").filter(function() {
   // you can use the `$.trim` method for trimming whitespaces
   // return $.trim(this.value).length === 0; 
   return this.value.length === 0;
});

if ( $empty.length > 0 ) {

}

如果你想给空白字段添加边框，你可以声明一个 CSS 类并使用 .removeClass 和 .addClass 方法:

CSS:

.red_border {
   border: 1px solid red;
}

JavaScript:

var $empty = $(".necessarily").removeClass('red_border').filter(function() {
   return this.value.length === 0;
}).addClass('red_border');