javascript - 如何使用其子级将 CSS 应用于父级

Question

你好，我想在父级上使用它的子级应用 CSS

<li>
    <div>
        <label>
            <b style="display: none;">Name and Date of Event*: </b>
        </label>
    </div>
</li>

我想隐藏列表。但我不知道如何应用 CSS。

我刚用过

jQuery("b:contains('Name and Date of Event*:')").css('display','none');

但它只隐藏了<b>标签我要隐藏li。

如何使用 child 隐藏父 li。是否可能。

Answer 1

使用 .closest() 功能。它接受一个选择器并找到合适的祖先。

$('#btn').on('click', function(){
  $("b:contains('Name and Date of Event*:')").parents('li').css('display','none');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  Li Content
    <div>
        <label>
            <b style="display: none;">Name and Date of Event*: </b>
        </label>
    </div>
</li>
<button id="btn">Hide li</button>

为什么使用 .closest 而不是 .parents ？

.closest()

1. 以当前元素开始
2. 在 DOM 树中向上移动，直到找到与提供的选择器匹配的项
3. 返回的 jQuery 对象包含原始集合中每个元素的零个或一个元素

.parents()

1. 从父元素开始
2. 沿着 DOM 树向上移动到文档的根元素，将每个祖先元素添加到一个临时集合中；如果提供了一个选择器，它然后根据选择器过滤该集合
3. 返回的 jQuery 对象包含原始集合中每个元素的零个或多个元素