Quiero encontrar la suma de los primeros valores de los campos de texto con nombres de clase ordenados dinámicamente en un DOM usando jQuery.
Por ejemplo:
<input type="text" class="abc5"> <input type="text" class="xyz5"> <input type="text" class="abc9"> <input type="text" class="xyz9"> <input type="text" class="abc4"> <input type="text" class="xyz4"> <input type="text" class="abc3"> <input type="text" class="abc10"> <input type="text" class="abc2">¿Cómo seleccionar la suma de los dos primeros valores de campo de texto con un nombre de clase que comienza con abc? Gracias por la ayuda
Podrías hacerlo así:
$('[class^="abc"]').on("input", function() { var n = $('[class^="abc"]').map(function() { return $(this).val().match(/^\d+$/) ? +$(this).val() : 0 }).get().reduce((pv, cv) => { return pv + (parseFloat(cv) || 0); }, 0) console.log(n) });Esto obtendrá todos los valores donde el valor es un número y los multiplicará.
Manifestación
$('[class^="abc"]').on("input", function() { var n = $('[class^="abc"]').map(function() { return $(this).val().match(/^\d+$/) ? +$(this).val() : 0 }).get().reduce((pv, cv) => { return pv + (parseFloat(cv) || 0); }, 0) console.log(n) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="abc5"> <input type="text" class="xyz5"> <input type="text" class="abc9"> <input type="text" class="xyz9"> <input type="text" class="abc4"> <input type="text" class="xyz4"> <input type="text" class="abc3"> <input type="text" class="abc10"> <input type="text" class="abc2">Obtendrá los primeros dos campos de entrada, puede hacer cualquier cosa en el cuerpo de la función.
count=0; $("input").each(function () { if($(this).attr(class).substr(0,3) == "abc") { $(this).val(); count++; if(count > 1) { return; } } });Al usar Vanilla JS, solo obtendrá los valores de las primeras 3 (pocas) entradas según su pregunta
// Update function runs when initiated then every time an input is updated // Just outputs the total to innerHTML of #calcTotal const update = () => { total.innerHTML = `Total: ${values.reduce((sum, a) => sum + a, 0)}` }; const total = document.getElementById('calcTotal') const holder = document.getElementById('calcInputs'); const inputs = Array.from(holder.children); // Empty array to update with for lopp below const values = []; // For the first 3 items in inputs[] for (let i = 0; i < 3; i++) { // Push input value into values[] values.push(parseFloat(inputs[i].value)) // Event listener updates value in array every time input is changed inputs[i].addEventListener('change', (event) => { values[i] = parseFloat(inputs[i].value); update(); }) }; update(); body { font-family: sans-serif; margin: 0; } * { box-sizing: border-box } #calcInputs { display: flex; flex-wrap: wrap; } input { margin: 0.5rem; width: calc( (100% / 3) - 1rem ); } input:nth-of-type(-n+3) { color: red; font-weight: 900; } #calcTotal { margin: 0.5rem; font-size: 1.25rem; font-weight: 900; } <div id="calcInputs"> <input type="number" class="abc5" value="10"> <input type="number" class="xyz5"value="25"> <input type="number" class="abc9" value="7"> <input type="number" class="xyz9" value="99"> <input type="number" class="abc4" value="2"> <input type="number" class="xyz4" value="5"> <input type="number" class="abc3" value="401"> <input type="number" class="abc10" value="62"> <input type="number" class="abc2" value="63"> </div> <div id="calcTotal">Total</div>