Question

I have the following structure:

<div class="foo">
     <div class="moo">
            <div class="too"> <input type="hidden" val="56"/></div>
     </div>       
</div>
<div class="foo">
     <div class="moo">
            <div class="too">  <input type="hidden" val="58"/></div>
     </div>       
</div>

Continued…

//jQuery Code
$('.too').live('click',function(){
  var next_value = $(this).next('.too').find('input').val();
  console.log(next_value);
});

Now I want the value of the next “too” input. How can I get this? It’s not working.

Answer 1

Your problem is that .next() traverses sibling elements. One approach would be to climb up the DOM tree, then back down. For example:

$('.foo').on('click', '.too', function () {
  var next_value = $(this).closest('.foo').next().find('input').val();
});

Also, you should try to avoid .live(). If you are using jQuery 1.7+, you’ll want to use .on() (as shown in my example). If you are using anything before 1.7, try .delegate() or .bind().