Question

Am trying to select the element after the element am working and retrieve its class, but i keep the undefined error
this is the html

<div class="clearfix">
                    <input type="text" name="username" placeholder="Username" /><span class="form-validation-status"></span>
               </div>

And this is the javascript

$(document).ready(function() {
    var username_field = $("input[name='username']");
    var email_field = $("#_email");
   var host_url = "http://localhost/ur/";
        //Check if the username is already in use
        username_field.blur(function() {
            var _username = username_field.val();
            var uri = host_url+"accounts/signup/is_username_exist/"+_username;
            $.ajax({ 
                url:uri,
                type:'GET',
                dataType:'json',
                success:function(data) {
                                   var test = $(this).closest("span").attr("class");
                                   alert(test);
                } 
            });
});

Its keeps alerting as undefined what am doing wrong?

Answer 1

You want to use next() not closest()

And $(this) in your success handler refers to data, you need to define the variable earlier in order to fetch it there.

var $theSpan = $("input[name='username']").next();
alert($theSpan.attr('class'));

Should do it.