jquery con display di classe e stile: blocco

Question

sto recuperando il numero di elementi "trovati" (questi elementi hanno la classe .highlight) con questo semplice jQuery frammento:

$(".highlight").length 

Ma ora il mio problema è che alcuni elementi sono nascosti, via style="display: none;"

Ora, come posso ottenere il numero di elementi evidenziati e visualizzati?

Qualcosa di simile:

$(hasClass 'highlight' AND has style 'display: block'). length ? 

Answer 1

È possibile utilizzare :visible per ottenere elementi che sono visibili.

$(".highlight:visible").length 

Answer 2

U può anche fare usando css vedere l'elemento è css display="none" o display="block"

$(".highlight").each(function(){ 
     if($(this).css("display")=="block"){ 
      //Your code here 
     } 
    }); 

Answer 3

Un modo è quello di utilizzare :visible jQuery selettore pseudo come detto Adil.

Un errore comune è che se l'elemento con classe di .highlight è annidato in un contenitore che è nascosto allora non sarà in grado di farlo, anche se tale elemento ha display: block

Invece si potrebbe usare css regex come segue: $('.highlight[style*="display: block"]')

Un errore comune è che è necessario sapere esattamente come viene scritta la regola. Se non c'è spazio prima del block in questo modo: display:block invece di display: block non sarai in grado di ottenere l'elemento.

Un modo per superare questo è quello di cercare solo il termine block negli stili in questo modo: $('.highlight[style*="block"]')