Javascript 获取所有子项的父项

当“选择”更改时，我尝试在“父选择”的“父选择”的“所有范围”中设置“显示：无”

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

尝试：

---

一个简单的测试会告诉你问题所在

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

它返回没有作为子级的跨度的值

是的

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

您可以使用选择器和最近的

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

---

最好是添加一个类

，这样当选择更改时，您想在product1 div下面的所有span标记上设置display none吗？ 从那里的代码中，看起来您将获得select的父div og，这将是带有类输入的div。因此，我想您必须再次获取该div的父级并选择所有子级跨度。

尝试使用.parents

---

代替$this。最接近的'product1'您可以只使用$'product1'。Ty但是我有很多块，所有的块都有id product1、product2等。我必须有结构的通用代码。@A.Wolff抱歉，忘了移除感谢它的工作。我不能接受你的回答，因为我的代表率低。

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

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

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