Получить родительский элемент родительского опекуна всех детей

Question

Я пытаюсь установить отображение: ни один из всех диапазонов в родительском элементе родительского элемента не выбирается при изменении.

Моего 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» в моем выборе.

Не работает код 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

Try:

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

Answer 3

Так когда Выберите изменения, которые вы хотите, чтобы установить дисплей ни на всех тегах диапазона под продуктом1 div справа? Из кода, который у вас есть, похоже, что вы получите родительский div og select, который будет div с вводом класса. Поэтому, я думаю, вам придется снова получить родительский элемент этого div и выбрать все дочерние интервалы.

Answer 4

Попробуйте использовать .parents()

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