jquery combining multiple selectors

Question

alert($('.input-large[name="name"]:parent:parent').html());

My html is :

<div class="control-group">
    <label for="name" class="control-label">Clinic Name</label>
    <div class="controls">
       <input type="text" name="name" id="name" class="input-large" value="">
    </div>
</div>

I'm getting null in the alert. How to find the parent of the parent of the input element?

Answer 1

You could do the parent().parent() chain as others have done, or just pass the parent selector into .parents() for a cleaner chain, like so:

alert( $('#name').parents('.control-group').html() );

Answer 2

For all input-large[name=name] elements:

$(".input-large[name=name]").each(function(){
    alert($(this).parent().parent().html());
});

But then again this will give you an alert for each instance.

Answer 3

Try

alert( $('#name').parent().parent().html() );