jquery find next class in a list

Question

I know this question has been asked a few times but none of the answers seem to work, or at least that I have found anyway.

I need to select the error class from the list items after checking input from the form input.

Here is what I have:

The html:

 <ul>
    <li class="label"><label>Label</label></li>
    <li class="input"><input name="fname" type="text" /></li>
    <li class="icon"></li>
    <li class="clearfix"></li>
    <li class="error"></li>

    <li class="label"><label>Label</label></li>
    <li class="input"><input name="lname" type="text" /></li>
    <li class="icon"></li>
    <li class="clearfix"></li>
    <li class="error"></li>

    <li class="label"><label>Label</label></li>
    <li class="input"><input name="uname" type="text" /></li>
    <li class="icon"></li>
    <li class="clearfix"></li>
    <li class="error"></li>

    <li class="label"><label>Label</label></li>
    <li class="input"><input name="password" type="password" /></li>
    <li class="icon"></li>
    <li class="clearfix"></li>
    <li class="error"></li>
 </ul>

The jQuery:

$('input[name=uname]').on("input", function() {

var input = $.trim(this.value);
var BLIDRegExpression = /^[a-zA-Z0-9]+$/;

if(input == 0){
    uname_status = false;
    $(this).closest('li').next('.icon').html('<img src="/assets/images/png/glyphicons_199_ban.png" />');
    $(this).parent('li').next().next().next('li').show(); 
    $(this).parent('li').next().next().next('li').html('<span>You must enter a Username!</span>');
    return false;
}
});

The above does work, I was just wondering if there is a better way of selecting the "error" class than using:

    $(this).parent('li').next().next().next('li').show(); 

I have tried the following and they didn't work:

// From another stackoverflow question
$(this).closest('li').nextAll(':has(.error):first').find('.error');

$(this).parents('li').eq(0).next().find('li.error');

// Works but selects the next error class' and the one after
$(this).closest('li').nextAll('li.error').show();  
or
$(this).parent('li').nextAll('li.error').show();   

Is there another solution? Am I just missing something simple?

Answer 1

try using nextAll() and filter the results to get first(), as:

$('input[name=uname]').on("input", function() {
    ......
    $(this).parents(".input")
        .nextAll(".error").first().html('<span>You must enter a Username!</span>');
})