jquery 计算输入数并根据其值求和

bd1hkmkf  于 2022-12-29  发布在  jQuery
关注(0)|答案(8)|浏览(160)

我想做两件事：
1.我想计算有值的inputs的个数（值是A还是X都无关紧要）。
1.然后，计算inputs的值等于A的数量
因此，结果应包含6 of 14 items
这是我试图计算已经有价值的投入：

var filledInputs = $(".col input").filter(function() {
  return !!this.value;
}).length;

const test2 = document.querySelectorAll(".result");
test2.forEach((item) => {
  item.innerHTML = filledInputs;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col">
  <input type="text" value="A">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

<div class="results"></div>
jquery

8条答案

按热度按时间
envsm3lx

envsm3lx1#

jQuery的一个可能实现：

let any = 0;
let a = 0;
$(".col input").each((idx, item) => {
    if (!item.getAttribute("value")) {
        return;
    }
    
    if (item.getAttribute("value") == "A") {
        a += 1;
    }
    
    any += 1;
});
$(".results").html(a + " of " + any + " items")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
        <input type="text" value="A">
        <input type="text" value="A">
        <input type="text" value="X">
        <input type="text" value="X">
        <input type="text" value="A">
    </div>
    <div class="col">
        <input type="text" value="A">
        <input type="text" value="X">
        <input type="text" value="A">
    </div>
    <div class="col">
        <input type="text" value="X">
        <input type="text" value="X">
        <input type="text" value="A">
    </div>
    <div class="col">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>

    <div class="results">
        6 of 14 items
    </div>
赞(0）分享  回复(0）举报  2022-12-29
kcwpcxri

kcwpcxri2#

使用与查找填充输入相同的逻辑，查找值为A的输入

const filledInputs = $(".col input").filter(function () {
  return !!this.value;
}).length;
const inputWithValA = $(".col input").filter(function () {
  return this.value === 'A';
}).length;
console.log(filledInputs)
console.log(inputWithValA)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col">
  <input type="text" value="A" />
  <input type="text" value="A" />
  <input type="text" value="X" />
  <input type="text" value="X" />
  <input type="text" value="A" />
</div>
<div class="col">
  <input type="text" value="A" />
  <input type="text" value="X" />
  <input type="text" value="A" />
</div>
<div class="col">
  <input type="text" value="X" />
  <input type="text" value="X" />
  <input type="text" value="A" />
</div>
<div class="col">
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>

<div class="results">6 of 14 items</div>
赞(0）分享  回复(0）举报  2022-12-29
byqmnocz

byqmnocz3#

var $inputs = $(".col input").filter(function() {
  return !!$(this).val();
});

var inputsFilled = $inputs.length
var inputsA =$inputs.filter(function() {
  return $(this).val() == 'A';
}).length

console.log(inputsFilled)
console.log(inputsA)

$(".results").html(`${inputsA} of ${inputsFilled} are A`)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

<div class="results"></div>
赞(0）分享  回复(0）举报  2022-12-29
mnemlml8

mnemlml84#

这里有一个最小的解决方案：

var AInputs = $(":input[value='A']").length;
console.log(AInputs);

完整片段：
x一个一个一个一个x一个一个二个x

赞(0）分享  回复(0）举报  2022-12-29
qvtsj1bj

qvtsj1bj5#

1.不要像那样混合DOM和jQuery
1.您正在循环遍历一个元素
也许你是这个意思：

const $breakdown = $("#breakdown");
const $results = $(".results")
let totalA = 0;
let totalNonEmptyInput = 0;
$(".col").each(function(i, ele) {
  const $inputs = $(ele).find("input");
  let As = 0;
  const notEmpty = $inputs.filter(function() { 
    const val = this.value.trim();
    if (val === "A") {
      As++;
      totalA++;
    }  
    totalNonEmptyInput += val !== "";
    return val !== "" 
  }).length;
  $results.html(`${totalA} of ${totalNonEmptyInput}`)
  $breakdown.append(`<li>${(i+1)}: ${notEmpty}/${$inputs.length} - found ${As} A</li>`)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

<div class="results"></div>
<ul id="breakdown"></ul>
赞(0）分享  回复(0）举报  2022-12-29
xmakbtuz

xmakbtuz6#

const cols_ = document.querySelectorAll('.col');
let inputs_val_a = []; // matched input will stored here

cols_?.forEach(function(col,col_i){
  
  col.querySelectorAll('input')?.forEach(function(ipt, ipt_i){

    if( ipt.value == 'A' ){
      // match
      console.log('cols:'+col_i+' input:'+ipt_i+' have value "A"');
      inputs_val_a.push(ipt);
    }
  })
});

document.querySelector('.results').innerHTML = 'there is '+ inputs_val_a.length + ' inputs with value == A';
<div class="results"></div>

<div class="col">
  <input type="text" value="A">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text">
  <input type="text">
  <input type="text">
</div>
赞(0）分享  回复(0）举报  2022-12-29
blmhpbnm

blmhpbnm7#

也许在vanilla JS中最简单的方法（比过滤更简单）是做三个选择：一个用于所有输入，然后使用value属性进行两次选择。

const inputs = document.querySelectorAll('input');
const inputsAll = document.querySelectorAll('[value]');
const inputsA = document.querySelectorAll('[value="A"]');

console.log(`${inputsAll.length} of ${inputs.length} items`);
console.log(`${inputsA.length} of ${inputs.length} items`);
<div class="col"> <input type="text" value="A"> <input type="text" value="A"> <input type="text" value="X"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text" value="A"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text" value="X"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text"> <input type="text"> <input type="text"></div><div class="results"></div>
赞(0）分享  回复(0）举报  2022-12-29
jvidinwx

jvidinwx8#

如果在填写字段时需要更新计数，可以在事件驱动函数中重新计算：

const inps=$(".col input").get(); 
$("body").on("input",".col input",upd8);
function upd8(){
 [any,A]=inps.reduce((a,c)=>  (c.value&&++a[0]&&c.value.toUpperCase()=="A"&&++a[1],a),[0,0]);
 $(".results").html(A + " of " + any + " items")
};
upd8();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
        <input type="text" value="A">
        <input type="text" value="A">
        <input type="text" value="X">
        <input type="text" value="X">
        <input type="text" value="A">
    </div>
    <div class="col">
        <input type="text" value="A">
        <input type="text" value="X">
        <input type="text" value="A">
    </div>
    <div class="col">
        <input type="text" value="X">
        <input type="text" value="X">
        <input type="text" value="A">
    </div>
    <div class="col">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>

    <div class="results">
        6 of 14 items
    </div>
赞(0）分享  回复(0）举报  2022-12-29
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com