Question

我正在尝试使用HTML选择嵌套的jQuery元素。

<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选择它们但我想按类选择它们。我已经尝试过如下组合：

 $('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：查找具有类fa-clock-o =＆gt;的div类型fa（标记）的后代。没有选择，因为没有标记fa-clock-o。

div.fa .fa-clock-o：查找类fa-clock-o的所有元素，这些元素是div的后代，类fa =＆gt;会匹配你想要的。

.fa.fa-clock-o：查找包含类fa和fa-clock-o =＆gt;的元素匹配你想要的东西

Answer 2

请尝试$('.fa').hide();

选择嵌套的DOM元素

2 个答案: