Maybe (untested):
$('select.amount').bind('change', function() {
var $parent = $(this).parent();
var $price = $parent.siblings('.price');
var $total = $parent.siblings('.total');
$total.html(parseInt($(this).val())*parseInt($price.html());
});
Or if you're really paranoid that your markup will change, this might
be safer (so long as your classes stay the same:
$('select.amount').bind('change', function() {
var $parent = $(this).parents('.product');
var $price = $parent.find('.price');
var $total = $parent.find('.total');
$total.html(parseInt($(this).val())*parseInt($price.html());
});
I use $ as a variable prefix to remind myself that those are jQuery
objects and I don't need to wrap them in $(...).
Hope it helps.
--Erik
On 6/13/07, Christoph Hörterer <[EMAIL PROTECTED]> wrote:
Hi,
I have a quite general question.
I have the following markup:
<table id="articles">
<tr class="product">
<td>
<select size="1" name="prod1" id="prod1"
class="amount">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</td>
<td>Produkt 1</td>
<td class="price">5</td>
<td class="total">0</td>
</tr>
</table>
And now I'd like to calculate from the selected ("amount" * "price")
and write this into "total".
At the moment I catch the "change" like this:
$(".amount").change(function() {
alert($(this).val());
});
But how do I access "price" and "total"? Sure, I could search once
again, but as I want to display more products, I would prefer to go up
the hierarchy and descend once again. I already tried it once with
parent() but I'm not sure how this would work when changing the
markup.
Perhaps I could find a successor with a specific "id" with
parent("specificID") but how can I descend once again in the DOM to
access the before mentioned elements?
I hope my description is comprehensible enough.
Thanks for any suggestions,
Christoph
