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

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

您需要：

1. 查詢通過類名
2. 過濾jQuery集合的所有元素，以便只保留那些沒有價值
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 3

試試這個代碼：

$("#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 4

你會做的更好看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 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(){ 
 
\t 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>