Question

I seem to have some difficulty understanding the way these jQuery selectors work.

Say you have this sort of html

<form>
    <input type="hidden" name="something" value="1" class="class_name" />

    <div>
        <input class="blur_function" name="email" />
    </div>
</form>

And the following jQuery

$(document).ready(function(){

   $('.blur_function').live('blur',function(){

       // get the value of the hidden input above 
       var something = $(this).prev('.class_name').val();

   });

});

I would imagine this ‘prev(‘.class_name’) would traverse upwards in the code until it hits something with class=”class_name”, however I end up with undefined since it traverses only within the element its inside.

So I need to do something like this to get outside the parent div and within the scope of the previous .class_name:

  var something = $(this).parent().prev('.class_name').val();

Is there a faster way to do this using the same html structure?

Answer 1

I will suggest:

var something = $('.class_name', $(this).closest('form')).val();

to select all the inputs that are direct children:

var something = $('> .class_name', $(this).closest('form')).val();

to select only the first .class_name that is direct child of the form:

var something = $('> .class_name:first', $(this).closest('form')).val();

jsFiddle demo