Seleccion de elementos con Jquery

[Slikp]

- Buenas en primer lugar disculpen el titulo si no es el mas adecuado, pero no supe muy bien que titulo dar... Tengo muchisimo tiempo que no codeaba absolutamente nada y en estos momentos tengo un dilema con un proyecto para uso personal y la verdad creo que mi problema no es tanto de codigo si no de "Logica" y necesito de una ayuda de su parte por favor, me explico. Tengo lo siguiente:

- Aun no me he metido con el Php pero la estructura basica del Html seria esta.

Código (html4strict) [Seleccionar] Expandir


                                    <div class="panel-body">
<div class="panel" id="panel_formulario">
<!--===================================================-->
 <div class="row">
<table class="table text-center table-hover table-reflow">
 <thead>
   <tr>
     <th class="text-center">ITEM</th>
     <th class="text-center">Cant.</th>
     <th class="text-center">Producto</th>
     <th class="text-center">Marca</th>
     <th class="text-center">Precio</th>
     <th class="text-center">Importe</th>
   </tr>
 </thead>
<tbody>
 <!--
  SE SUPONE QUE AQUI VAN A CAER LOS DATOS DE UN FOREACH TRAIDOS DESDE UN AJAX
  Y TODO LO DEMAS EN CADA TD PARA ASIGNAR LOS DATOS CORRESPONDIENTES
  EN CADA ITERACION Y MAS O MENOS SE VERA ASI
   -->
   <tr class="ref">
     <td>1</td>
     <td><input class="cant" type="number" name=""></td>
     <td>Otto</td>
     <td>Elite</td>
     <td >225 bsf</td>
     <td>450 bsf </td>
   </tr>

<tr class="ref">
     <td>2</td>
     <td><input class="cant" type="number" name=""></td>
     <td>Thornton</td>
     <td>Primor</td>
     <td>175 bsf</td>
     <td>175 bsf </td>
   </tr>

<tr class="ref">
     <td>3</td>
     <td><input class="cant" type="number" name=""></td>
     <td>Vaso Refrigerante Titanium</td>
     <td>Primor</td>
     <td>1500 bsf</td>
     <td>4500 bsf </td>
   </tr>
   </tbody>
</table>
 </div>
 <div class="row">
  <div class="col-sm-3 col-sm-offset-3">
     <button class="btn btn-primary btn-labeled fa fa-print fa-lg" >Generar Venta</button>
   </div>
   <div class="col-sm-3 ">
 <button class="btn btn-danger btn-labeled fa fa-repeat fa-lg" id="btn-cancelar" type="reset">Cancelar Venta</button>
</div>
 </div>

<!--===================================================-->
</div>
</div>


- Lo que da como resultado esto.

- Ok se supone que utilizo el buscador y cada vez que selecciono un articulo se anexa el nuevo Item... Ahora si al grano lo que intento hacer es multiplicar lo que marque en ROJO que seria el PRECIO por la cantidad que asigno con el inpunt tipo number que marque en AZUL. Yo se que puedo seleccionar el valor de type number de miles de formas como por ejemplo esta:

Código (html4strict) [Seleccionar] Expandir


$("input[type='number']").click(function(e) {
        e.preventDefault();
        var data2 = $(this).val(); ;
        alert(' Valor de cant: '+data2);
        });


- Y de igual forma puedo seleccionar el valor dentro del TD aunque yo prefiero poner un input type hide he imprimir el monto y luego obtener su valor algo asi.

Código (html4strict) [Seleccionar] Expandir


<tr class="ref">
<td>1</td>
<td><input class="cant" type="number" name=""></td>
<td>Otto</td>
<td>Elite</td>
<td>225 bsf</td>
<td>450 bsf </td>
       <td><input class="precio" type="hide" name="" value="AQUI LO IMPRIMO CON PHP"></td>
 </tr>

<!- Y LUEGO LO OBTENGO Y LO MULTIPLICO -->

$("input[type='number']").click(function(e) {
        e.preventDefault();

        var data = $('.precio').val();
        var data2 = $(this).val(); ;
        var result = data * data2;
        alert('Valor de precio: '+data+ ' Valor de cant: '+data2+ ' Valor de resultado: '+result);
       
       
        });


- Y Eso me funciona pero mi problema es que si incremento el item 2, o el item 3 siempre me toma los datos del item 1, he intentado de varias formas y la verdad ya estoy algo viejo para esto jajaja asi que pido un poco de ayuda, que estoy haciendo mal? como selecciono cada elemento individual de cada tr? porque mientras los voy anexando con Jquery siempre van a tener la misma Class y como dije quizas es cuestion de Logica y lo estoy estructurando mal o como dije antes existe algo en Jquery que me permita seleccionar los elementos por separado de cada TR?, para asi multiplicarlos con sus correspondientes precios y cantidades?

- Bueno muchas gracias de antemano al que me brinde su ayuda y espero haberme explicado bien... Saludos.

[engel lex]

si, lo más sano es colocar un input type hide con el monto... te recomiendo que le coloques un class a los hidden y en jquery al seleccionarlo por el class, te retornará un array con todos los elementos conseguidos... luego simplemente recorres el array, sumas los valores y listo

Código [Seleccionar] Expandir


$("#id_del_boton_que_activa_esto").click(function() {
  var suma = 0;
  var conseguidos = $(".class_de_los_hidden_con_los_precios");
  for(i = 0; i < conseguidos.length; i++){
    suma += parseInt(conseguidos[i].value);
  }   
}


[Slikp]

- Buenos dias engel lex, gracias por tu respuesta... Si te entendi bien creo que lo que me planteas no me va a funcionar porque tu me pides que "sume todos los precios" primero? Si es asi el calculo del precio total de los articulos sera incorrecto.

-Porque si yo tengo 4 Item pero del Item 2 tengo 4 al sumar los precios solo se sumara un solo item del numero 2 y no 4 a menos que yo anexe 4 item del numero 2 pero eso mismo es lo que quiero evitar anexar N cantidad de veces el mismo articulo, por eso plantee la situacion de multiplicar el precio por la cantidad asignada en el input type number.