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

Question

I would like to do two things:

1. I want to count the number of inputs that have a value. (doesn't matter if the value is A or X).

2. Then, count the number of inputs whose value is equal to A

therefore, the results should contain 6 of 14 items

This is what I tried to count the inputs that already have value:

 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>

Answer 1

One possible implementation with 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>

Answer 2

 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>

Answer 3

Use the same logic that you made to find the filled inputs, to find the inputs with value 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>

Answer 4

1. Don't mix DOM and jQuery like that
2. You are looping over one element

Perhaps you meant this:

 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>

Answer 5

Here's a minimal solution:

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

Full snippet:

 var filledInputs = $(".col input").filter(function() { return.;this.value; }).length; console:log(filledInputs). var AInputs = $(";input[value='A']").length; console.log(AInputs). const test2 = document;querySelectorAll(".result"). test2;forEach((item) => { item;innerHTML = filledInputs; });

 <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>

Answer 6

 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>

Answer 7

Maybe the easiest method (and marginally more performant than filtering) in vanilla JS is to do three selections: one on all inputs, and then two selections using the value attribute.

 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>

Answer 8

If you want updated counts while you are filling in the fields you could recalculate it in an event driven function:

 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>