Question

Hopefully a simple issue:

$(document).ready(function(){
    $("#regform").validate({
        errorPlacement: function (error, element) {
            $(element).parent().next().next().hide();    //works
            $(element).parent().next('div.test').hide(); //doesn't work 
        }           
    });
});


<form id="regform">
    <div class="field">
        <input name="username" id="username" type="text" class="text required" />
    </div>
    <div class="dummy">
        &nbsp;
    </div>  
    <div class="test">
        Hide this text
    </div>
</form>

I’m trying to get the div with the class “test” to hide upon a validation error. Traversing one-by-one works, but including a selector doesn’t work.

Can someone tell me what I’m doing wrong?

Thanks.

Answer 1

Along with siblings() you could use nextAll():

$(element).parent().nextAll('.test:first').hide();

JS Fiddle proof of concept

The advantage of this approach is that nextAll() looks only to later siblings, whereas siblings() looks both ways. I’m limiting the selection to only the :first matched element simply because I assumed that, if you want to hide specifically, it’s only the first item you’d want to hide.