jQuery elements animate to a child value?

Question

I'm looking to click a.go and then have a series of divs all with the class of .box animate to a percentage that is held in an input within the parent .box

So i looks something like this:

<a class="go" href="#">go!</a>

<div class="box><input type="hidden" value="50"/></div>
<div class="box><input type="hidden" value="90"/></div>
<div class="box><input type="hidden" value="20"/></div>
<div class="box><input type="hidden" value="60"/></div>


       $('a.go').click(
        function() {
               $('.box').animate({
                    "left": "50%"
                     }, 2000);
            }
       ); 

So right now I can animate them all 50%, but I want to animate them to the value of its input. What should I be using? each()?

Answer 1

like this?

$('a.go').click(function() {
    $('.box').each(function() {
         $(this).animate({ left: $('input', this).val() + '%' }, 2000);
     });
});