2010-03-08 9 views
2

Je voudrais cacher tout class = "csc-content" où le frère précédent est un h4 class = "faq".jQuery - masquer si l'élément précédent a une classe particulière

MISE À JOUR Erreur: Je pense que c'est faux ... le frère précédent n'est pas h4. Mais j'espère que vous obtenez le point que toute « réponse » est cachée si la « question » a la classe « faq » /UPDATE

Ceci est le code html:

<div id="centerCol-1"> 
    <div id="c65" class="csc-default normal"> 
    <div class="csc-header csc-header-n1"><h4 class="faq">FAQ question1</h4></div> 
    <div class="csc-content active"><p class="bodytext">Answer1</p></div> 
    </div> 
    <div id="c67" class="csc-default normal"> 
    <div class="csc-header csc-header-n2"><h4 class="faq">FAQ question2</h4></div> 
    <div class="csc-content active"><p class="bodytext">Answer2</p></div> 
    </div> 
    <div id="c68" class="csc-default normal"> 
    <div class="csc-header csc-header-n3"><h4>not FAQ</h4></div> 
    <div class="csc-content active"><p class="bodytext">Not an answer, just normal content</p></div> 
    </div> 
</div> 

jQuery devrait être quelque chose comme :

// find all outer divs with class csc-default in the div centerCol-1 
// test if they contain a header div with an h4 class faq 
// go to next element and hide it. Error... this should be parents next element? 
$("#centerCol-1 .csc-default").find("h4").is(".faq").next(".csc-content").hide(); 

BR. Anders

Répondre

6

Vous devez utiliser le sélecteur adjacent avec le sélecteur :has, comme ceci:

$('#centerCol-1 .csc-default .csc-header:has(.faq)+.csc-content').hide(); 

Demo

+1

+1, merveilleux à lire et à suivre. –

+0

Wow! Quelle réponse rapide et incroyable! Bonne réponse mais j'ai posé la mauvaise question et l'ai édité pendant que vous répondiez. – Tillebeck

+1

@Tilebeck: J'ai compris ce que vous vouliez avant de modifier. – SLaks

0

Essayez ceci:

$("#centerCol-1 .csc-content").filter(function() { 
    return $(this).prev().find(".faq").length > 0; 
}).hide(); 
3

Attendez, vous voulez seulement cacher la réponse div pour chaque question FAQ? Donc, si le h4 a la classe .faq, la div immédiatement après la div parent qui est caché:

$("#centerCol-1 h4.faq").parent().next("div").hide();