用数据计算输入框的数量

时间:2015-02-20 22:32:32

标签: jquery

如何计算在其中输入文本的所有.waypoint-container input元素的计数。到目前为止,我已经设法找出如何访问每个元素,但我不确定如何确定如何将符合要求的元素添加到“计数”。

function countActiveWaypoint() {
    // n = 0
    $('.waypoint-container input').each(function (index, element) {
        if ($(this).val().length > 0) {
             // if the textbox is filled then n+1
             $('#waypoints').val(n);
        }
    }); 
}

2 个答案:

答案 0 :(得分:3)

你只需数数并将其归还。

function countActiveWaypoint() {
    var count = 0;
    $('.waypoint-container input').each(function () {
        if ($(this).val().length > 0) {
            count++;
        }
    });
    return count;
}
$('#waypoints').val(countActiveWaypoint());

由于您正在使用jQuery,您还可以通过创建一个简单的jQuery扩展来使它更加jQuery。这样的东西就足够了(根据你的喜好改变名字):

jQuery.fn.extend({
    countNotEmptyInputs: function() {
        var count = 0;
        this.each(function() {
            if ($(this).is("input:text") && $(this).val().length > 0) {
                count++;
            }
        });
        return count;
    }
});

var count = $('.waypoint-container input').countNotEmptyInputs();
$('#waypoints').val(count);

答案 1 :(得分:2)

快速查找具有值的所有元素:

function countActiveWaypoint() {
  return $('.waypoint-container input[value!=""]').length;
}

$('#waypoints').val(countActiveWaypoint());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="waypoint-container">
  <input type="text" value="" />
  <input type="text" value="test 1" />
  <input type="text" value="test 2" />
</div>

<input id="waypoints" type="text" />