jQuery rilevare elementi visibili, ma nascoste

Questo sembra che dovrebbe essere abbastanza facile - ma non riesco a trovare il selettore a destra per essojQuery rilevare elementi visibili, ma nascoste

Secondo la documentazione (http://api.jquery.com/hidden-selector/ e http://api.jquery.com/visible-selector/) ...

Elementi può essere considerato nascosto per diversi motivi:

Un elemento di antenato è nascosto, quindi l'elemento non viene mostrato sulla pagina.

Quello che voglio rilevare è "questo elemento è visibile, ma è contenuto in un genitore nascosto". Cioè, se ho reso visibile il genitore, questo elemento sarebbe anche visibile.

fonte

2010-03-31 Paul

Se questo è qualcosa che si usano comunemente, rendere il proprio selettore :) Ecco un esempio:

jQuery.expr[':'].hiddenByParent = function(a) { 
    return jQuery(a).is(':hidden') && jQuery(a).css('display') != 'none'; 
};

è possibile utilizzarlo in questo modo, di test di marcatura:

<div style="display: none" id="parent"> 
    <div> 
     <div id="child">Test</div> 
    </div> 
</div>

Esempi di utilizzare:

$("div:hiddenByParent").length; // "2" (plain div + child match) 
$("#child").is(":hiddenByParent"); // true

In alternativa, è possibile utilizzare la funzione di .filter() in questo modo:

$('selector').filter(function() { 
    return $(this).is(':hidden') && $(this).css('display') != 'none'; 
}

fonte

2010-03-31 15:59:11

Ottima risposta come sempre Nick!Ma se un elemento ha la visibilità impostata su nascosto, allora dovrai usare questo come selettore 'return $ (a) .is (': hidden') && $ (a) .css ('display')! = ' none '&& $ (a) .css (' visibility ') ==' visible '; ' – Mottie

@fudgey - Buon punto, le cose' visible' non sono "nascoste", ma occupa ancora lo spazio sulla pagina. Immagino che dipenda se stai cercando cose totalmente nascoste o cose che non occupano affatto spazio sulla pagina. Qualunque sia la definizione che cerchi, usa sicuramente questo approccio. –

Brillante! Solo la risposta che volevo, e anche il primo risultato su Google. Aggiungo solo per dire che penso che un nome selezionatore più carino sarebbe ": invisibile". È "visibile" ... ma * in * visibile. –

-1

Non credo che solo un selettore avrebbe funzionato, ma

<script> 
function parentHidden(id) { 
    return (!$(id).is(':hidden')) && $(id).parent().is(':hidden'))); 
}   
</script>

dovrebbe restituire quello che ti serve. Se è necessario verificare i propri antenati e non solo i genitori, è sufficiente sostituire la parte $(id).parent().is(':hidden') con una funzione che riceva la "catena degli antenati".

fonte

2010-03-31 14:05:52

Ma questo è esattamente ciò che io non voglio ... in particolare il punto 4. Si dice anche "Un elemento si presume essere nascosti se esso o uno dei suoi genitori non occupa spazio nel documento " – Paul

ah, vedo, mi dispiace per quello. aggiornamento della risposta. –

Ma questo non mi dà la certezza se l'elemento è effettivamente visibile - dice solo se il genitore è visibile, che non era esattamente la domanda – Paul

Se si tratta di un elemento specifico che si sta cercando allora potreste controllare che sia proprietà di visualizzazione

$('#element').css('display') != 'none';

Se non fosse stato un elemento specifico, allora si potrebbe trovare i nodi principali che sono nascosti utilizzando: nascosto quindi utilizzare una funzione personalizzata per cercare i nodi del tipo desiderato. E.g.

$('parent-selector:hidden').find('node-selector').each(function(){ 
    if($(this).css('display') != 'none') { 
    // do what you wanted 
    } 
});

Se si desidera un selettore pulita allora penso che si sta andando ad essere fuori di fortuna, come non credo che quello che vuoi è parte della specifica CSS, quindi non ci sarà come un selettore in jQuery.

fonte

2010-03-31 14:51:46

jQuery ha tutto questo built-in oggigiorno

$("#child").closest(':hidden').length == 0

fonte

2012-03-02 17:07:41 root

jQuery rilevare elementi visibili, ma nascoste

risposta

Problemi correlati