社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

jquery count具有值的输入字段数

Sam • 5 年前 • 1976 次点击  

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

<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
 
1976 次点击  
文章 [ 4 ]  |  最新文章 5 年前
Martijn
Reply   •   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>
Nidhin Joseph
Reply   •   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>
Ashique
Reply   •   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/

CertainPerformance
Reply   •   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 参数,因为它没有被使用。