2016-07-12 37 views
7

Ok, quindi dimmi che ho molte div. Alcuni dei div, i bambini hanno una classe, altri div i bambini hanno una classe diversa.Come nascondere un div genitore se un div interno ha una certa classe, con javascript

Voglio nascondere solo i div che hanno un figlio con una certa classe.

Per esempio,

<div class="mainDiv"> 
    <div class="kulkul"> 
     <div class="childA"> 
     </div> 
    </div> 
</div> 

<div class="mainDiv"> 
    <div class="lalala"> 
     <div class="childB"> 
     </div> 
    </div> 
</div> 

<div class="mainDiv"> 
    <div class="kulkul"> 
     <div class="childA"> 
     </div> 
    </div> 
</div> 

<div class="mainDiv"> 
    <div class="lalala"> 
     <div class="childA"> 
     </div> 
    </div> 
</div> 

<div class="mainDiv"> 
    <div class="kulkul"> 
     <div class="childB"> 
     </div> 
    </div> 
</div> 

<div class="mainDiv"> 
    <div class="lalala"> 
     <div class="childA"> 
     </div> 
    </div> 
</div> 

Ora sopra, diciamo che voglio solo per nascondere i div genitori che hanno un div bambino con la classe .childB

Questo non può essere fatto con i CSS come per quanto ne so (CSS3 comunque), perché i CSS non ti permettono di definire il div genitore, solo un div bambino. E i genitori .mainDiv div (quelli che voglio nascondere) sono tutti esattamente uguali.

Così lascia javascript.

Utilizzando l'esempio precedente, come è possibile nascondere tutti i div di .mainDiv che contengono un div figlio con la classe .childB?

+0

Si utilizza jQuery o no? –

risposta

6

Element Hiding GENITORE sulla base della sua diretta discendente

//Update the **sample-element-to-hide** with whatever you wanted to use as a child class with the parent element you wanted to hide e.g., 'childB' 
var elementToHideList = document.getElementsByClassName("sample-element-to-hide"); 
for (var i = elementToHideList.length; i--;) 
    elementToHideList[i].parentNode.style.display = "none"; 

NASCONDE IL GENITORE elemento in base al suo elemento secondario.

//Solution for the OP 
//Update the **childB** with whatever you wanted to use as a child class with the parent element you wanted to hide. 
//Note that this would only works if the parent element has a **className** mainDiv. You can change mainDiv with your own parent className. 

$('.classB').closest('.mainDiv').hide(); 
+0

no Non voglio nascondere un elemento con un nome di classe. Voglio nascondere il parent ** div che * non può * essere definito dal nome della classe poiché tutti i genitori hanno la stessa classe. – agvr3

+0

@ agvr3 vedi note aggiornate. Il codice nasconde il div padre in base alla classe di elementi figlio che credo nel tuo esempio 'classB' –

+0

È ** non ** un discendente diretto. Domanda aggiornata con più codice da chiarire. – agvr3

4

È possibile farlo con puro javascript:

var elementsChildB = document.getElementsByClassName("childB") 
 
for(var i = 0 ; i < elementsChildB.length ; i++){ 
 
    elementsChildB[i].parentNode.style.display = "none" ; 
 
}
<div class="mainDiv"> 
 
    <div class="childA"> 
 
     a 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
     a 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childB"> 
 
     b 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
     a 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childB"> 
 
     b 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
     a 
 
    </div> 
 
</div>

O con Jquery:

$(".childB").parent().hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
     a 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
     a 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childB"> 
 
     b 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
     a 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childB"> 
 
     b 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
     a 
 
    </div> 
 
</div>

+0

quel metodo nasconde solo il genitore immediato. Ho bisogno di nascondere un genitore specifico. – agvr3

+0

Ah ok, è possibile utilizzare: $ (". ChildB"). Parents (". MainDiv"). Hide() o $ (". ChildB"). Closest (". MainDiv"). Hide() – imazzara

1

Beh, è ​​possibile utilizzare 012 Metodoper selezionare il nodo padre dei nodi figlio specificati e utilizzare .hide() per nascondere i nodi padre selezionati.

$('.childB').each(function() { 
 
    $(this).parent().hide(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
    A 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
    A 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childB"> 
 
    B 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
    A 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childB"> 
 
    B 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
    A 
 
    </div> 
 
</div>

+0

questo metodo nasconde solo il genitore immediato. Ho bisogno di nascondere un genitore specifico. – agvr3

1

utilizzando jQuery, $('.childA').parent().hide();

+0

questo non funziona perché nasconde solo il genitore immediato ma il mio esempio è stato semplificato; ho bisogno di nasconderlo in base alla classe '.mainDiv' – agvr3

+0

che metodo nasconde solo genitore immediato. Ho bisogno di nascondere un genitore specifico. – agvr3

2

utilizzando jQuery è possibile utilizzare il seguente selettore.In questo modo nascondere tutto mainDiv contenente childB ma non mainDiv che contengono altri elementi o childB senza mainDiv come suo genitore (a qualsiasi livello, con l'uso di closest-https://api.jquery.com/closest/):

$(".childB").closest(".mainDiv").hide(); 

Fiddle:

$(function() { 
 
    $(".childB").closest(".mainDiv").hide(); 
 

 
});
.childB { 
 
    background-color: red; 
 
    border: 1px solid black; 
 
    height: 50px; 
 
    margin-left:20px; 
 
} 
 
.childA { 
 
    background-color: green; 
 
    border: 1px solid black; 
 
    height: 50px; 
 
    margin-left:10px; 
 
} 
 

 
.mainDiv { 
 
    background-color: yellow; 
 
    border: 1px solid black; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childB"> 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    PARENT 
 
    <div class="childA">Don't hide 
 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    PARENT 
 
    <div class="childB">To be hidden 
 
    </div> 
 
</div> 
 

 

 
<div class="mainDiv"> 
 
    This contains a child A which contains a child B: <br /> 
 
    <div class="childA">It is a child A 
 
    <div class="childB">To be hidden 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<div class="mainDiv"> 
 
    <div class="childA"> 
 
    </div> 
 
</div> 
 

 
<div class="childB">Should not be hidden 
 
</div>

+0

Ho provato questo ma non nasconde '.mainDiv', nasconde solo' .childB'. Come posso nascondere l'intero '.mainDiv' quando contiene un figlio con la classe' .childB'? – agvr3

+0

@ risposta agvr3 aggiornato – ClayKaboom

+0

di nuovo questo nuovo aggiornamento non ha nascosto il div '.mainDiv' (come l'altra risposta) ma solo il bambino. – agvr3

2

Ja Metodo vascript

var childB = document.getElementsByClassName("childB"); 
for(var e = 0; e <= childB.length; e++){ 
    childB[e].parentNode.style.display = "none"; 
} 

JQuery Metodo

$('.childB').parent().hide(); 
+0

quel metodo nasconde solo il genitore immediato. Ho bisogno di nascondere un genitore specifico. – agvr3

1

afferrare tutti div di classe mainDiv e ciclo per ogni classe può controllare i bambini ha classe specifica !!

var main = document.getElementsByClassName("mainDiv"); 
for(var i = 0; i < main.length ; i++){ 
    if(main[i].children[0].classList[0] == "childB"){ //assure only has one children 
     main[i].style.display = "none"; 
    } 
} 
+0

ha molti figli, il mio esempio è stato semplificato, funzionerà se ci sono molti bambini ma voglio solo nascondermi se c'è un bambino con la classe '.childB'? – agvr3

+0

provato, non funziona. – agvr3

Problemi correlati