ネストされたDOM要素を選択する

Question

と入れ子になった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で選択することはできますが、クラスごとに選択してください。 私はすでにのような組み合わせで試してみました：目標は非表示にすることです....

をより多くするとともに

$('div.fa fa-clock-o').css('visibility', 'hidden'); 

：

$('div div div .fa fa-clock-o').css('visibility', 'hidden'); 

そして：

$('.event_left .event_left-item .icon_2 .fa fa-clock-o').css('visibility', 'hidden'); 

とをそれらのFontAwesomeアイコン。

Answer 1

を試してみてくださいは、一方が他方の子孫だと思います。これを試してみてください：

$('.fa.fa-clock-o') 
// ^^^ 

div.fa fa-clock-o：なしタグfa-clock-oがないため、選択したクラスfa =>何もしていますdivの種類fa-clock-o（タグ）のいずれかの子孫を探します。

div.fa .fa-clock-ofa =>のdivの子孫であるクラスfa-clock-oの要素を探してください。

.fa.fa-clock-o：=>あなたはあまりにも

Answer 2

faとfa-clock-oあなたは、セレクタやjQueryの中にそれらの間のスペース（またはquerySelectorのような任意の代替）を持っていなければなりません同じ要素上のクラスであるので、この$('.fa').hide();