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

我的目标是：如果一个元素的所有子元素都不可见，那么对它执行一些操作

我下面的代码用红色勾勒出了如果它有任何不可见的子项。但我想这样做，只有当所有的孩子都是隐形的。如果元素有任何可见的子元素，则不要高亮显示它

我如何调整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>

可见项目1
可见项目2
无形的
隐形B
可见C
无形的
变量过滤器选项=函数（e）{
//目标：突出显示只有隐形子对象的
$（'#availableInstanceId>*>*：hidden'）.parent（）.css（“边框”，“3px实心红色”）；
} 
$（文档）.ready（函数（）{
过滤器选项（）；
});

---

此处的图像截图：

您需要比较所有：可见和：隐藏的数组

下面是一些伪代码

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

---

两行怎么样？一个是为每个元素打开它，另一个是为每个具有可见子元素的元素再次关闭它

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

---

假设要排除没有子元素的元素：

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

更新：这比我原来的答案有更好的性能：

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

---

这比我的性能要好得多：

功劳归于我。以下代码在IE8中工作

请注意，IE8实际上并不隐藏

元素，尽管有

显示：none

样式。另外，IE8似乎不接受

元素的

边框

样式

工作样本：（可编辑通过）

---

//根据需要更改css的问题解答

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

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

    } else {

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

    }

//删除空的optgroup示例

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

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

    } else {

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

    }

---

比较不可见子元素和总子元素之间的数组长度如何？事实上，有一种更快的方法可以通过遍历而不是选择来实现这一点：工作示例在FF中对我来说很好，但在IE 8（XP）中不起作用-jQuery和IE8是否存在已知问题？Jed的答案在IE8中都不起作用，不是因为jQuery被破坏了，而是因为IE8没有隐藏选项！接得好，布莱恩。你用这个行吗$（“option”）.filter（函数return（）{this.style.display==“none”}.parent（）.not（$（“：visible”）.parent（））它不太有效。你必须更进一步。我用正确的代码添加了一个社区答案。谢谢，这很好，至少突出显示了。不幸的是，我真正想做的是隐藏optgroup，而不是突出显示它。我应该在最初的问题中说，我不认为这会有什么不同，因为我主要关心的是选择器，但事实证明它确实会有不同，因为正如您前面提到的，IE有一个隐藏选择选项（和optgroup）的bug，请参阅）。因此，看起来我在IEF上运气不佳。如果你不介意额外的工作和复杂性，你可能会通过临时删除你想隐藏的元素（我猜，IE也可能不喜欢这样）来假装它。

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

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

    } else {

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

    }

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

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

    } else {

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

    }