JQuery 특정 li 요소 선택

Question

좋아요. 저는이 문제에 조금 어려움을 겪었습니다. 나는 여전히 JQuery를 배우고있다.

스크립트 :

$('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(); 
      } 

     }); 

    }); 

    } 
}); 

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> 

난 할 노력하고있어하면 입력을 가지는 리튬 요소를 선택이다 테두리 색을 변경하십시오. 하지만 오류 메시지가있는 곳의 테두리 색상 만 변경하고 싶습니다.

어떻게하면됩니까? 어떤 도움을 주시면 감사하겠습니다.

Answer 1

저는 방금 만든 예입니다.하지만 이와 같은 요소를 선택하는 것은 좋지 않습니다.

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

데모 : 그것은 .error의 다음 요소를 순환하고 5 개 시도 내에서 발견되지 않은 경우 .input를 찾습니다 http://jsfiddle.net/2rdrr/

, 그것은 포기합니다. 요소를 찾으면 테두리를 추가하고 루프를 깨뜨려 계속 보이지 않습니다.

참고 : 이것은 매우 똑똑하지 않습니다. 페이지를 제어 할 수 있으므로 요소를 찾아야하는 대신 요소의 위치를 ​​알아야합니다.

이렇게하는 더 좋은 방법은 다음과 같습니다.

<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> 

그런 다음이 작업을 수행 할 수 있습니다.

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