Question

当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

当然我想在同一个div id =“productX”中的所有span元素上设置display：none是我的选择。

我不使用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标签上设置display none吗？从你在那里的代码看起来你将得到父div和select，这将是与类输入的div。所以我想你必须再次获得该div的父级，并选择所有子级。

Answer 4

尝试使用 .parents()

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

得到所有孩子的父母的父母

4 个答案: