jquery count具有值的输入字段数

Sam • 5 年前 • 1987 次点击

在输入字段中输入值时,我想计算有多少个输入字段 在那一排 总共有一个值。

<div class="row">
    <input type="text" class="input input1" />
    <input type="text" class="input input2" />
    <input type="text" class="input input2" />
</div>

<div class="row">
    <input type="text" class="input input1" />
    <input type="text" class="input input2" />
    <input type="text" class="input input2" />
</div>

我在试着跟踪,但我认为问题出在循环上。

$('.input').keyup(function () {

    var field = $(this).parent().children('.input');
    var count = 0;

    $(field).each(function (i) {
        var len = $(field).val().length;        
        if (len > 0 ) {
            count++;
        }
    });

  alert(count);

});

jsfiddle公司 链接: http://jsfiddle.net/18cpotw6/

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/48122

1987 次点击

文章 [ 4 ] | 最新文章 5 年前

• 1 楼

Martijn 5 年前

你可以用 filter 是的。首先选择元素,然后在元素是否具有值时对其进行筛选:

function example(){
    const $row = $('.row');
    const length = $row.find('input').filter(function() {
        return this.value.length !== 0;
    }).length;
    
    console.log(length);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
    <input class="someSelection" />
    <input class="someSelection" value="foo" />
    <input class="someSelection" />
    <input class="someSelection" value="bar"/>
</div>
<button onclick="example()">Press me!</button>

• 2 楼

Nidhin Joseph 5 年前

从引用到 this post ,也可以创建自定义选择器,然后仅获取 input 有价值的。

jQuery.expr[':'].hasValue = function(el, index, match) {
  return el.value != "";
};

$('.input').keyup(function() {
  console.log($(this).parent().find('input:hasValue').length);
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="row">
  <input type="text" class="input input1" />
  <input type="text" class="input input2" />
  <input type="text" class="input input2" />
</div>

<div class="row">
  <input type="text" class="input input1" />
  <input type="text" class="input input2" />
  <input type="text" class="input input2" />
</div>

• 3 楼

Ashique 5 年前

你在你发现但使用相同的领域包含所有字段以查找值的变量。相反你必须这么做这 -

$('.input').keyup(function () {

    var field = $(this).parent().find('.input');
    var count = 0;

    $(field).each(function (i) {
        var len = $(this).val().length;     
        if (len > 0 ) {
            count++;
        }
    });

  alert(count);

});

小提琴: http://jsfiddle.net/ashhaq12345/yxrwdkfL/3/

• 4 楼

CertainPerformance 5 年前

与 $(field).val() ,您正在检索第一中的元素 field jquery集合。使用 $(this).val() 相反:

$('.input').keyup(function() {

  var field = $(this).parent().children('.input');
  var count = 0;

  $(field).each(function() {
    if ($(this).val()) {
      count++;
    }
  });

  console.log(count);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <input type="text" class="input input1" />
  <input type="text" class="input input2" />
  <input type="text" class="input input2" />
</div>

<div class="row">
  <input type="text" class="input input1" />
  <input type="text" class="input input2" />
  <input type="text" class="input input2" />
</div>

您还可以删除 i 参数,因为它没有被使用。

登录后回复