我正在尝试使用 jQuery
选择嵌套的 HTML
元素。
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<div class="events_box">
<div class="event_left">
<div class="event_left-item">
<div class="icon_2">
<i class="fa fa-clock-o" id="programHoursId0"></i>
</div>
<div class="icon_2">
<i class="fa fa-location-arrow" id="programLocationId0"></i>
</div>
我必须选择类 fa fa-clock-o
和 fa fa-location-arrow
。我可以按 ID 选择它们,但我想按类(class)选择它们。
我已经尝试过如下组合:
$('div div div .fa fa-clock-o').css('visibility', 'hidden');
还有:
$('.event_left .event_left-item .icon_2 .fa fa-clock-o').css('visibility', 'hidden');
还有:
$('div.fa fa-clock-o').css('visibility', 'hidden');
还有更多......
目标是隐藏那些 FontAwesome 图标。
最佳答案
由于 fa
和 fa-clock-o
是同一元素上的类,因此在选择器或 jQuery 中它们之间不能有空格(或任何替代方案,如 querySelector
) 会认为一个是另一个的后代。试试这个:
$('.fa.fa-clock-o')
// ^^^
div.fa fa-clock-o
:查找 div
类型 fa-clock-o
(标记)的任何后代具有类 fa
=> 未选择任何内容,因为没有标签 fa-clock-o
。
div.fa .fa-clock-o
:查找属于 div
后代且具有 fa-clock-o
类的任何元素code> 与类 fa
=> 将匹配您想要的内容。
.fa.fa-clock-o
:查找具有类 fa
和 fa-clock-o
=> 匹配的元素你也想要什么
关于javascript - 选择嵌套 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42400567/