selección jQuery de elementos que no tienen hijos visibles

Question

Aquí está mi objetivo: hacer algo sobre un elemento, un <optgrooup>, si todos sus hijos son invisibles.

Mi código a continuación describe el en rojo si tiene cualquier niños invisibles. Pero quiero hacerlo solo si todos los niños son invisibles. Si el elemento tiene hijos que están visibles, no lo resalte.

¿Cómo puedo ajustar el selector de jQuery para hacer eso?

Gracias de antemano.

<select multiple="multiple" name="availableInstanceId" id="availableInstanceId"> 
<optgroup label="Option Group 1"> 
    <option >visible item 1</option> 
    <option >visible item 2</option> 
</optgroup> 
<optgroup label="Option Group 2 - Should be highlighted"> 
    <option style="display:none;">invisible A</option> 
    <option style="display: none">invisible B</option> 
</optgroup> 

<optgroup label="Option Group 3 - Should not be highlighted"> 
    <option >visible C</option> 
    <option style="display: none">invisible D</option> 
</optgroup></select> 

<script type="text/javascript"> 
var filterOptions = function(e) { 
    // Goal: highlight the <optgroup>'s that have *only* invisible children 
    $('#availableInstanceId > * > *:hidden').parent().css("border","3px solid red"); 
} 
$(document).ready(function() { 
    filterOptions(); 
}); 
</script> 

Captura de pantalla de la imagen aquí: http://img144.imageshack.us/img144/556/selectexample.gif

Answer 1

Tendrá que comparar una matriz de todos los: vs visibles: oculto

Aquí hay un código de pseudo

if ($("#element:hidden").length == $("#element:visible").length) { 
    // Do stuff 
} ... 

Answer 2

¿Qué tal dos líneas para hacerlo? Uno para encenderlo para cada elemento y otro para apagarlo nuevamente para cada uno con un niño visible.

$('#availableInstanceId > *').css("border","3px solid red"); 
$('#availableInstanceId > * > *:visible').parent().css("border","none"); 

Answer 3

Suponiendo que desea excluir elementos con los elementos secundarios:

$(":has(*):not(:has(:visible))") 

Working example.

ACTUALIZACIÓN: Esto tiene un rendimiento mucho mejor que mi respuesta original:

$(":hidden").parent().not($(":visible").parent()) 

Answer 4

Esto tiene mucho mejor perfo rmance que mi original answer:

$(":hidden").parent().not($(":visible").parent()) 

Answer 5

crédito va a Jed Schmidt. El siguiente código funciona en IE8.

Tenga en cuenta que IE8 en realidad no oculta los elementos <option> a pesar del estilo display: none. Además, IE8 no parece aceptar los estilos border para los elementos <optgroup>.

muestra de trabajo: http://jsbin.com/aquya (editable a través de http://jsbin.com/aquya/edit)

$(document).ready(function() { 
    // Prevent CSS inherits 
    $("option").css('backgroundColor', 'white') 

    $("option") 
    .filter(function(){ 
     return this.style.display == 'none'; 
    }) 
    .parent() 
    .not($('option').filter(function(){ 
     return this.style.display != 'none'; 
    }).parent()) 
    .css('backgroundColor', 'blue') 
    .css('border', '1px solid red'); //this doesn't work in IE8 
}); 

Answer 6

// respuesta a la pregunta cambiar css según se desee

if($.browser.msie || $.browser.safari){ 

     $('optgroup:not(:has(:hidden))').css("border","3px solid red"); 

    } else { 

     $('optgroup:not(:has(:visible))').css("border","3px solid red"); 

    } 

// eliminar optgroups ejemplo vacío

if($.browser.msie || $.browser.safari){ 

     $('optgroup:not(:has(:hidden))').remove(); 

    } else { 

     $('optgroup:not(:has(:visible))').remove(); 

    }