如何计算所选元素的数量？

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');

Answer 2

您可以更好地查看HTML5 Contraint API，而不是执行您当前正在执行的操作，这是一种更加手动且耗时的方式。

而不是给每个字段一个“必然”的类（旁注：你需要的词是'必要'，而不是'必然'，或者更好，'必需'）使用required属性。 所以：

<input name="last-name" required type="text" />

然后在您的jQuery中，您可以使用以下命令来定位空字段

$('input:invalid').css('border', 'solid 1px red');

如果您所做的只是突出显示坏字段，那么您甚至不需要JavaScript 。 你可以通过CSS做同样的事情：

input:invalid { border: solid 1px red; }

唯一的问题是样式将在用户填写表单之前显示，这几乎是不可取的。 你可以避开这个登录，通过JS，当提交表单时， 才把激活方式：

JS：

$('form').on('submit', function() { $(this).addClass('show-errors'); });

CSS：

.show-errors input:invalid { border: solid 1px red; }

Answer 3

你需要：

1. 按className查询所有元素
2. 过滤jQuery Collection，以便只保留没有值的元素
3. doSomethingElse

所以，这可能会帮助你：

 function CheckEmptyCtrl($) { 'use strict'; var self = this; self.target = $('.necessarily'); self.empty = self.target.filter(function(index, item) { return !($(item).val().trim()); }); $('#result').append(self.empty.length + ' elements have no values.'); console.log(self.empty.length, self.empty); } jQuery(document).ready(CheckEmptyCtrl); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <div id="result"></div> <form name="frm" action="#"> <input name="first-name" class="necessarily" type="text" value="notEmpty" /><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 4

试试这段代码：

$("#btn").click(function(){
     var selectedcount = $(".necessarily").length; //no. of elements with necessarily class name
     var emptyInputCount=0;
      $(".necessarily").each(function(){
      if($(this).val() == ''){
        emptyInputCount++;
      }

    });

Answer 5

尝试使用目标元素上的each循环。

 $(function() { $("#btn").click(function() { var i = 0; $(".necessarily").each(function() { if ($(this).val() == "") { $(this).css('border', '1px solid red'); i++; } }); alert(i); //Number of input element with no value }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.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 6

您可以使用filter()例如以下示例。

var empty_inputs = $('.necessarily').filter(function(){
    return $(this).val()=='';
});

empty_inputs.length将在我的示例中返回3。

希望这可以帮助。

---

 var empty_inputs = $('.necessarily').filter(function(){ return $(this).val()==''; }); console.log(empty_inputs.length); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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" value="Register"/><br><br> <input name="password" class="necessarily" type="password" /><br><br> <input name="address" class="anything" type="text" value="Register"/><br><br> <input name="btn" id="btn" type="submit" value="Register" /> 

希望这可以帮助。

Answer 7

您需要遍历所有输入并计算有多少是空的。 在同一个循环中，您还可以计算空的.necessarily输入数。

此示例将结果输出到.result范围。

 $("#btn").click(function() { var inputs = $("form input"); var emptyNecessarilyCount = 0; var totalEmpty = 0 inputs.each(function() { if ($(this).val() == "") { totalEmpty++; if ($(this).hasClass('necessarily')) { emptyNecessarilyCount++; } } }); $('.result').append("Total: " + totalEmpty); $('.result2').append("Necessarily: " + emptyNecessarilyCount); }); 

 span { display: block; } 

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