name - seleccionar el padre de un elemento con jquery

Usando un nombre de clase en jQuery''s.closest()

Question

Estoy intentando hacer algunos cálculos para un "total acumulado", este es mi código:

$(''.quantity_input'').live(''change'',function(){         
                var ValOne = parseFloat($(this).val());
                var ValTwo = parseFloat($(".price").text())
                var totalTotal = ((ValOne) * (ValTwo));                         
                $(''.cost_of_items'').closest(''.cost_of_items'').text(totalTotal.toFixed(2));
                calcTotal();
            });     

.quantity_input es una entrada, .price es el precio del producto, .cost_of_items es donde quiero actualizar el costo total del artículo, es decir. item1 = £ 5 x 3 cantidad = £ 15 total para item1 calcTotal () es una función que simplemente actualiza el costo total de la orden. El problema es mantener todas las matemáticas en una fila de la tabla, es decir, estoy haciendo el calc en el código anterior y no está pegado a su fila, está actualizando todos los campos con la clase .cost_of_items etc ...

el problema con mostrar mi html es que se agrega dinámicamente por jQuery .appends () pero aquí está el jQuery relevante:

$(''#items'').append(''<tr class="tableRow"><td><a class="removeItem" href="#"><img src="/admin/images/delete.png"></img></a><td class="om_part_no">'' + omPartNo + ''</td><td>'' + supPartNo + ''</td><td>'' + cat + ''</td><td class="description">'' + desc + ''</td><td>'' + manuf + ''</td><td>'' + list + ''</td><td>'' + disc + ''</td><td><p class="add_edit">Add/Edit</p><input type="text" class="quantity_input" name="quantity_input" /></td><td class="price_each_nett price">'' + priceEach + ''</td><td class="cost_of_items"></td><td><p class="add_edit">Add/Edit</p><input type="text" class="project_ref_input" name="project_ref_input" /><p class="project_ref"></p></td></tr>'');

EDITAR:

Solución de trabajo:

$(''.quantity_input'').live(''change'',function(){         
                var ValOne = parseFloat($(this).val());
                var ValTwo = parseFloat($(this).closest(''tr'').find(''.price'').text())
                var totalTotal = ((ValOne) * (ValTwo));                         
                $(this).closest(''tr'').find(''.cost_of_items'').text(totalTotal.toFixed(2));
                calcTotal();
            });     

Answer 1

Más cercano encontrará el ancestro más cercano (padre, abuelo), pero luego tendrá que hacer un hallazgo para encontrar el elemento correcto para actualizar. Por ejemplo, si tiene un elemento en una fila de la tabla y necesita otro elemento en esa misma fila:

$(''.myElement'').closest(''tr'').find(''.someOtherElement'');

Editar:

En tu caso, querrás

$(this).closest(''tr'').find(''.cost_of_items'').text(totalTotal.toFixed(2));

Answer 2

Necesitas encontrar el .cost_of_items en el <tr> contiene this :

$(this).closest(''tr'').find(''.cost_of_items'')

Answer 3

No necesita usar find. closest toma un argumento de contexto . eso te ayuda a reducir el campo de búsqueda. Deberías usar eso.

Answer 4

No usaría .find() . Supongo que probablemente sea un poco más eficiente atravesar el <td> más cercano y obtener el hermano <td> con la clase .cost_of_items utilizando el método .siblings() jQuery .

$(this).closest(''td'').siblings(''.cost_of_items'');

EDITAR: Para aclarar, aquí está el marcado de .append() :

<tr class="tableRow">
     <!-- NOTE THAT THE CLOSING </td> IS MISSING FOR THE FIRST <td> -->
    <td><a class="removeItem" href="#"><img src="/admin/images/delete.png"></img></a>
    <td class="om_part_no">'' + omPartNo + ''</td>
    <td>'' + supPartNo + ''</td>
    <td>'' + cat + ''</td>
    <td class="description">'' + desc + ''</td>
    <td>'' + manuf + ''</td>
    <td>'' + list + ''</td>
    <td>'' + disc + ''</td>
     <!-- TRAVERSE TO HERE -->
    <td>
       <p class="add_edit">Add/Edit</p>
        <!-- START HERE -->
       <input type="text" class="quantity_input" name="quantity_input" />
    </td>
    <td class="price_each_nett price">'' + priceEach + ''</td>
     <!-- SIBLING IS HERE -->
    <td class="cost_of_items"></td>
    <td><p class="add_edit">Add/Edit</p><input type="text" class="project_ref_input" name="project_ref_input" /><p class="project_ref"></p></td>
</tr>