Auswählen eines verschachtelten DOM-Elements

Question

Ich versuche ein verschachteltes HTML Element mit jQuery auszuwählen.

<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> 

Ich habe die Klassen fa fa-clock-o und fa fa-location-arrow auszuwählen. Ich bin in der Lage, sie nach ID auszuwählen, aber ich möchte sie nach Klasse auswählen. Ich habe bereits versucht, Kombinationen wie:

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

Und:

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

Und:

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

Zusammen mit vielen mehr ....

Das Ziel ist, sich zu verstecken diese FontAwesome Symbole.

Answer 1

Seit fa und fa-clock-o sind Klassen auf dem gleichen Element, das Sie nicht Raum zwischen ihnen in der Auswahl oder jQuery (oder jede Alternative wie querySelector) wird man denken muss, ist ein Nachkomme des anderen . Versuchen Sie folgendes:

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

div.fa fa-clock-o: Suchen Sie nach jedem Nachkommen Typ fa-clock-o (tag) ein div, die die Klasse hat fa => nichts ausgewählt, weil es gibt keinen Tag fa-clock-o.

div.fa .fa-clock-o: suchen Sie alle Elemente mit der Klasse fa-clock-o, die Nachkommen eines div mit der Klasse sind fa => passt auf, was Sie wollen.

.fa.fa-clock-o. Sucht Elemente, die die Klassen fa und fa-clock-o haben => übereinstimmt, was Sie wollen, zu

Answer 2

Bitte versuchen Sie diese $('.fa').hide();