如何計算所選元素的數量？

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>