javascript - 选择嵌套 DOM 元素

Question

我正在尝试使用 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 图标。

Answer 1

由于 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 => 匹配的元素你也想要什么