jQuery 计算有值的输入字段的数量

Question

When a value is entered in an input field, I want to count how many input fields in that row have a value in total.

<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'm trying following but I think problem is with the loop.

$('.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 link: http://jsfiddle.net/18cpotw6/

Answer 1

With $(field).val() , you're retrieving the value of the first element in the field jQuery collection. Use $(this).val() instead:

 $('.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>

You can also remove the i parameter, since it's not being used.

Answer 2

You looped through the fields you have found but used the same field variable which contains all the fields to find the values. Instead you have to do this -

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

});

Fiddle: http://jsfiddle.net/ashhaq12345/yxrwdkfL/3/

Answer 3

From reference to this post , you can also create a custom selector and then only get input which has values.

 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>

Answer 4

You can use filter . You first select the elements, and then filter them on if they have a value or not:

 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>