jQuery conditionele selectors

[fonsoy]

Op het moment ben ik bezig met het schrijven van een javascriptje, dat de inhoud van een <h1> attribuut uitleest. De structuur van mijn HTML is als volgt;

code:

[...]
<div id="no1">
    <div class="maincontainer" style="">
        <h1 class="appheader">
            Titel van de actieve header hier
        </h1>
    </div>
    <div class="vrijcontainer" style="display:none">
        <h1 class="appheader">
            Titel van een niet actieve header hier
        </h1>
    </div>
</div>

De app werkt door het weergeven van een van de twee divs binnen de parent div, no<nummer>.

Nu ben ik geinteresseerd in de inhoud van de <h1> van de actieve appheader. Het nummer van de hoofd div (no#) kan ik makkelijk achterhalen. Die selecteren lukt dus. Ik moet dus controleren of de style eigenschap van de parent div, wel of niet op display:none staat.

De volgende bron is benut bij mijn poging; http://api.jquery.com/attribute-not-equal-selector/ . Ik denk dat mijn probleem in het 'stacken' van de paden is. Is dit een best practice, of moet ik een hele andere kant op kijken?
Ik ben uitgekomen op het volgende;

code:

var vrij = $('#no' + i + '.vrijcontainer[style!="display:none"].appheader').text();
var main = $('#no' + i + '.maincontainer[style!="display:none"].appheader').text();

Als op een dergelijk eenvoudige manier kan, lijkt dit me de beste oplossing.

[BHR]

http://api.jquery.com/hidden-selector/

PS. in je voorbeeld heb je geen spatie tussen "$('#no' + i + '" en ".vrijcontainer ......", maar ik neem aan dat dat een copypaste fout is.

[418O2]

.is(":visible")

?

nog sneller is gewoon een activeclass te togglen.

[ Voor 56% gewijzigd door 418O2 op 31-01-2013 13:03 ]