Jquery 첫 번째 발생 트리가 부모/형제를 트래버스합니다.

Question

주어진 클래스에 대해 가장 가까운 (트리에서) 얻는 가장 좋은 방법은 무엇입니까?하지만 부모의 형제가 될 수 있습니다.

나는

<div> 
    ... 
    <div class="errors">errors2</div> 
    <div> 
     ..... 
     <div class="errors">errors1</div> 
     ... 
     <div>...</div> 
     <div> 
      ..... 
      <div class="start"></div>    
     </div>  
    </div> 
</div> 

는 모든 스크립트하지만 정말 나쁜 나던 작품을 만들어 ".start" "errors1"요소 요소에서 시작 싶어.

http://jsfiddle.net/9DfCJ/1/

감사 편집을 할

: 추가는 "..."그 구조가 동적 향상. 요점은 가장 가까운 ".errors"트리를 찾는 것입니다.

Answer 1

위대한 질문입니다. 아래 코드는 당신을 위해 작동합니다. .errors의 요소를 찾을 때까지 .start의 각 상위 요소를 반복합니다. 그런 다음 .start에 가장 가까운 .errors 요소의 텍스트를 알립니다.

jQuery(function($){ 

    var $start = $('.start'), 
     $parents = $start.parents(); 

    $parents.each(function(){ 
     var $this = $(this), 
      $thisErrors = $this.find('.errors'), 
      numErrors = $thisErrors.length; 

     if(numErrors){ 
      alert($thisErrors.eq(numErrors-1).text()); 
      return false; 
     } 

    }); 

}); 

Answer 2

jQuery의 prev() 명령을 조사하십시오. 예를 들어, 찾아 '시작'클래스의 맥락에서, 다음 사용하는 것이 때 이전의 '오류'를 숨길 수 :

$('.start').click(function(){ 
    $(this).prev('.errors').hide(); 
}); 

더 여기 읽기 : http://api.jquery.com/prev/

UPDATE :

를

중첩되어있는 경우 위로 이동하려면 parent()을 사용하는 것이 더 나을 것입니다. parent() 또한 인수로 선택자를 취합니다. 인수없이 현재 노드의 부모를 가져옵니다. 당신이 트리를 이동하고 모든 오류를 얻고 싶다면

http://api.jquery.com/parent/

Answer 3

$(this).parent().siblings(':first') 

Answer 4

, 당신은 그런 일 할 수있는 : 끝에서

var start = $(".start"), 
    current = start.parent(), 
    parent = current, 
    end_class = "stop", 
    get_errors = function(elt) { 
     return elt.children(".errors"); 
    }, 
    errors = get_errors(current) 

    while (parent = current.parent()) { 

     $.merge(errors, get_errors(parent)); 
     if (parent.hasClass(end_class)) { 
      break; 
     } 
     current = parent; 
    } 

을 errors 모두 포함됩니다 오류.

상단 div에 end_class을 추가해야합니다.

<div class="stop"> 
    ... 
    <div class="errors">errors2</div> 
    ... 
</div> 

Answer 5

내가 뒷조사를했고, 현재 요소에서 시작하여 위로 진행, 즉 선택과 일치하는 첫 번째 요소를 얻을 수있는 무언가를 발견

var myText = $(".start").closest($(".errors")).text(); 

이 here에 대한 자세한 내용을 읽고 사용할 수

이 코드를 호출하는 이벤트.

Answer 6

항목을 jQuery 객체로 반환하여 더 재사용 할 수있는 함수입니다.

이것은 모든 부모를로드하고 매번 find (http://api.jquery.com/find/)를 통해 모든 레벨의 어린이를 확인하는 것이 아니라 한 번에 한 레벨 만 보게되므로 Byran의 대답보다 효율적입니다.

jQuery를로드 한 후 자바 스크립트 파일 또는 스크립트 태그에 함수를 붙여 넣기 만하면됩니다.

$('.start').closestParentsAndSibling('.errors').html('found!'); 

(function($){ 
    $.fn.closestParentsAndSibling = function(search) { 
     // Get the current element's siblings 
     var siblings = this.siblings(search); 

     if (siblings.length != 0) { // Did we get a hit? 
      return siblings.eq(0); 
     } 

     // Traverse up another level 
     var parent = this.parent(); 
     if (parent === undefined || parent.get(0).tagName.toLowerCase() == 'body') { 
      // We reached the body tag or failed to get a parent with no result. 
      // Return the empty siblings tag so as to return an empty jQuery object. 
      return siblings; 
     } 
     // Try again 
     return parent.closestParentsAndSibling(search); 
    }; 
})(jQuery);