html lists - JQuery Selecting specific li element -

ok have been struggling little bit. i'm still learning jquery.

here have:

the script:

$('ul li.error').animate({     height: 'toggle',     opacity: 'toggle'     }, {     duration: 500,     specialeasing: {     width: 'linear',     height: 'easeinoutcubic'     },     complete: function() {      $(this).each(function(){          $(this).delay(4000);          $(this).animate({             height: 'toggle',             opacity: 'toggle'         }, {             duration: 7000,             specialeasing: {             width: 'linear',             height: 'easeinoutcubic'         },         complete: function(){             $(this).delay(1000);                 $(this).parent().next().find('li input').css('border-color', 'red');                 $('#somediv').slidedown();               }          });      });      } }); 

the html:

<div>    <ul>  <li class="error">(error message if any)</li>  <li class="label"><label></li>  <li class="input"><input></li>   <li class="error">(error message if any)</li>  <li class="label"><label></li>  <li class="input"><input></li>    </ul> </div> 

what i'm trying select li element has input , change border color. want change border color of 1 there error message.

how can this? appreciated, thanks!

here example have made, it's not selecting elements though.

$('.error').each(function(){     var next = $(this).next();     for( var = 0; < 5; i++ ) {         if( next.hasclass('input') === false ) {             next = next.next();         } else {             next.css('border', '1px solid red');             break;         }     } }); 

demo: http://jsfiddle.net/2rdrr/

it loops through next elements .error , tries find .input if hasn't found within 5 tries, give up. if finds element adds border , breaks loop doesn't keep looking.

note: not clever, in control of page should know elements instead of having them.

a better way of doing is.

<div>    <ul>       <li class="error">(error message if any)</li>       <li class="label"><label></li>       <li class="input"><input></li>    </ul>    <ul>       <li class="error">(error message if any)</li>       <li class="label"><label></li>       <li class="input"><input></li>    </ul> </div> 

then can this.

$('.error').parent().find('.input').css('border', 'red');