Использование имени класса в jQuery .closest ()

Question

Я пытаюсь выполнить некоторые вычисления для «промежуточного итога», это мой код:

$('.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 - это ввод, .price - цена продукта, .cost_of_items - этогде я хочу обновить общую стоимость товара, т.е.item1 = £ 5 x 3 количество = £ 15 всего для item1 calcTotal () - это функция, которая просто обновляет общую стоимость заказа.Проблема состоит в том, чтобы хранить всю математику в одной строке таблицы, то есть я делаю вычисления в приведенном выше коде и не придерживаюсь ее строки, обновляю все поля с помощью класса .cost_of_items и т. Д ...

проблема с показом моего html заключается в том, что он динамически добавляется jQuery .appends (), но здесь есть соответствующий jQuery:

$('#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>');

РЕДАКТИРОВАТЬ:

Рабочее решение:

$('.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

Вам нужно найти .cost_of_items в <tr>, содержащем this:

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

Answer 2

Ближайший найдет ближайшего предка (родителя, деда), но вам нужно будет выполнить поиск, чтобы найти правильный элемент для обновления. Например, если у вас есть элемент в строке таблицы, и вам нужен другой элемент в той же строке:

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

Edit:

В вашем случае вам захочется

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

Answer 3

Я бы не стал использовать .find().Я предполагаю, что, вероятно, будет немного эффективнее пройти до ближайшего <td> и получить брата <td> с классом .cost_of_items, используя метод .siblings() jQuery .

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

---

РЕДАКТИРОВАТЬ: Чтобы уточнить, вот разметка от .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>

Answer 4

Вам не нужно использовать поиск.closest принимает аргумент контекста .это поможет вам сузить поле поиска.Вы должны использовать это.