jquery选择没有可见子元素的元素

Question

这是我的目标:在一个元素上做一些事情<optgrooup>,如果它的所有孩子都是隐形的.

我的下面的代码概述了红色,如果它有任何看不见的孩子.但是,只有当所有的孩子都看不见时,我才愿意这样做.如果元素具有任何可见的子项,则不要突出显示它.

我怎样才能调整jQuery选择器来做到这一点？

提前致谢.

<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>

图片截图:http://img144.imageshack.us/img144/556/selectexample.gif

Answer 1

假设您要排除没有子元素的元素:

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

工作实例.

更新:这比我原来的答案要好得多:

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

Answer 2

您需要比较所有 :visible 和 :hidden 的数组

这是一些伪代码

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