jQuery sibling selector?

Question

Hi,

I have a table which I'm trying to do a pricing list, that auto-computes the tax component..

I'm getting the value from price_1, applying a math cal, and saving it to tax_1. I could read the number of the end of the id, but hopefully there is a cleaner way with jQuery.

E.g. I would have a lot of fields like..

• price_1
• price_2
• price_3
• tax_1
• tax_2
• tax_3 etc...

I can use the following code to call jQuery on change of a price, and get the value of that price. How do I update the tax field next to it? should I use a sibling selector or something??

$('#pricing').delegate("input", "change", function(){

  $(this).val() /* the value of the price */; 

})

Answer 1

If tax field is present next to the price as you say, you can use the next() in order to select that. It would be better if you post your html too.

Answer 2

i will need some HTML to give a better answer, but what you asking for is really simple.

$(document).ready(function() {
    $(".price").blur(function() {  // when the price input loses focus
        var price = $(this).val();     
        var tax = price * 1.15; // use whatever formula you need here, this is for Mexico.
        $(this).next().val(tax);
    }
});

this is of course assuming there is an input showing the tax amount next to every price input. if you decide to use a Label or a Span just change $(this).next().val(tax); to $(this).next().text(tax);

Answer 3

It depends on your dom structure, but generally you could have something like

var commonParent = 'tr'; // a common parent for finding related nodes

$('#pricing').delegate("input", "change", function(){

  var val = $(this).val() /* the value of the price */; 
  var tax = val;

  $(this).parents(commonParent).find('input[name=*tax]').val(tax);
})