Question

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

例如像这样的东西：（但这个例子不能正常工作）

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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，而不是执行您当前正在执行的操作，这是一种更加手动且耗时的方式。

而不是给每个领域一个班级＆＃39;必然＆＃39; （旁注：您需要的字词是“必要的＆＃39;”，而不是＆＃39;必然＆＃39;或者，更好的是，＆＃39;必需＆＃39;）使用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

你需要：

按className查询所有元素
过滤jQuery Collection，以便只保留没有值的元素
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

试试这段代码：

modifyOperations.modifyRecordsCompletionBlock = ^(NSArray *savedRecords, NSArray *deletedRecordIDs, NSError *error)
{
    if(error){
        NSLog(@"Error: %@", error.localizedDescription);
    }

    item.creatorRecordId = record.recordID;
};

Answer 5

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

＆＃13;

$(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
  });
});

＆＃13;

<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>

＆＃13;

希望这有帮助！

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>

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

7 个答案: