actualmente tengo
var cost = document.getElementsByName('blog_linkm_one[]'); for (var i = 0; i < cost.length; i++) { sum += parseFloat(cost[i].value); } Esta función me da la suma de todos los nombres de los cuadros de text box como blog_linkm_one[] y está funcionando.
Ahora quiero filtrarlo.
Tengo algunas clases diferentes como appending_div0 , appending_div1 , appending_div2 y todas esas clases tienen cuadros de texto con el nombre sd blog_linkm_one[] .
Lo que quiero es obtener la suma de blog_linkm_one[] relevantes según su clase particular.
Por ejemplo
la clase appending_div0 tiene 3 cuadros de texto blog_linkm_one[] . Y su valor es 1 , 2 , 3 , por lo que su suma tiene que ser 6
la clase appending_div1 tiene 5 cuadros de texto blog_linkm_one[] . Y su valor es 1 , 2 , 3 , 5 , 9 Entonces su suma tiene que ser 20 .
una de las posibles respuestas...
const cls = ['appending_div0','appending_div1','appending_div2'] let sum = { any:0 } document.querySelectorAll('input[name="blog_linkm_one[]"]').forEach(el=> { sum.any += parseFloat(el.value) cls.forEach(cl=> { if (el.classList.contains(cl)) { sum[cl] = (sum[cl] ?? 0) + parseFloat(el.value) } }) }) console.log( sum ) <input type="text" name="blog_linkm_one[]" class="" value="10000" > <input type="text" name="blog_linkm_one[]" class="appending_div0" value="1" > <input type="text" name="blog_linkm_one[]" class="appending_div0" value="2" > <input type="text" name="blog_linkm_one[]" class="appending_div0" value="3" > <input type="text" name="blog_linkm_one[]" class="appending_div1" value="1" > <input type="text" name="blog_linkm_one[]" class="appending_div1" value="2" > <input type="text" name="blog_linkm_one[]" class="appending_div1" value="3" > <input type="text" name="blog_linkm_one[]" class="appending_div1" value="5" > <input type="text" name="blog_linkm_one[]" class="appending_div1" value="9" > <input type="text" name="blog_linkm_one[]" class="appending_div2" value="4" > <input type="text" name="blog_linkm_one[]" class="appending_div2" value="5" > <input type="text" name="blog_linkm_one[]" class="appending_div2" value="6" > <input type="text" name="blog_linkm_one[]" class="" value="20000" >La pregunta está etiquetada [jQuery], así que aquí hay una respuesta jQuery (parcialmente) que involucra una cadena que comprende:
Aquí está su utilidad básica: -
function filterAndSummate(elements, className) { return $(`.${className}`, elements) // filter .map((i, element) => parseFloat($(element).val())) // map filtered elements to values .get() // convert jQuery object to Array .reduce((x, value) => x + value, 0); // summate the values } Ahora, tres formas en las que podría querer llamar a filterAndSummate()
var costElements = document.getElementsByName('blog_linkm_one[]'); let cost_1 = filterAndSummate(costElements, 'appending_div0'); let cost_2 = filterAndSummate(costElements, 'appending_div1'); let cost_3 = filterAndSummate(costElements, 'appending_div2'); var costElements = document.getElementsByName('blog_linkm_one[]'); let costs = ['appending_div0', 'appending_div1', 'appending_div2'] // array of classNames .map(className => filterAndSummate(costElements, className)); // map to array of costs (one per className) var costElements = document.getElementsByName('blog_linkm_one[]'); let grand_total = ['appending_div0', 'appending_div1', 'appending_div2'] // array of classNames .map(className => filterAndSummate(costElements, className)) // map to array of costs (one per className) .reduce((x, c) => x + c, 0); // summate all the costs to get a grand-total