모든 부모의 부모를 얻으십시오

Question

선택이 변경 될 때 parent select의 부모의 모든 범위에 대해 display : none을 설정해보십시오.

내 HTML 코드 물론

<div id="product1"> 
<div class="block"> 
    <span>qwerty</span> 
    <span>qwerty</span> 
    <span>qwerty</span> 
    <span>qwerty</span> 
    .... 
    <span>qwerty</span> 
</div> 
<div class="input"> 
    <select class="sel"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
    </select> 
</div> 
</div> 
several times the same 

내가 설정 디스플레이를 원하는 내 선택이다에서 = "productX"같은 DIV 아이디의 모든 범위의 요소 없음.

내 jQuery 코드가 작동하지 않습니다.

$(document).ready(function(){ 
     $(document).on('change', '.sel', function() { 
      $(this).parent('div').children('span').css('display' , 'none'); 
     }); 
    }); 

Answer 1

간단한 테스트는 당신에게 문제

console.log($(this).parent('div')) 

그것은 아이들로 더 스팬이 없습니다 <div class="input">을 반환을 보여줍니다.

이

$(this).parent('div').parent('div').find("span").hide(); 

당신이 선택하고 가장 가까운

을 사용할 수있는 것

$(this).closest('div[id]').find("span").hide(); 

더 나은 선택 변경하면 디스플레이 전혀 설정되어 있지하려는 경우에 따라서 클래스를

Answer 2

시도 :

이

$(document).ready(function(){ 
    $(document).on('change', '.sel', function() { 
     $(this).parent('div').parent('div').find('span').css('display' , 'none'); 
    }); 
}); 

Answer 3

를 추가하는 것입니다 product1 div 오른쪽 아래의 모든 span 태그에서? 거기에있는 코드에서 클래스 입력과 함께 div가 될 select라는 부모 div div를 얻게되는 것처럼 보입니다. 그래서 나는 당신이 그 div의 부모를 다시 한 번 가지게하고 모든 자식을 선택해야만 할 것이라고 생각합니다.

Answer 4

대신`$ (이) .closest ('#의 제품 1')의 .parents()

$(document).ready(function(){ 
     $(document).on('change', '.sel', function() { 
      $(this).parents('div[id^="product"]').children('span').css('display' , 'none'); 
     }); 
    });