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

【问题标题】：jquery selection of elements with no visible childrenjquery选择没有可见子元素的元素
【发布时间】：2010-10-24 21:25:53
【问题描述】：

这是我的目标：在一个元素上做某事，<optgrooup>，如果它的所有子元素都是不可见的。

如果它有 any 个不可见的子级，我的下面的代码用红色勾勒出来。但我只想在 all 孩子不可见的情况下这样做。如果元素有任何可见的子元素，则不要突出显示它。

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

【问题讨论】：

比较不可见和总孩子的数组长度怎么样？

标签： jquery css-selectors children visible

【解决方案1】：

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

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

Working example.

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

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

【讨论】：

实际上，有一种更快的方法可以通过遍历而不是选择来做到这一点：stackoverflow.com/questions/841401/…
工作示例在 FF 中对我来说很好，但在 IE 8（在 XP 上）上却不行 - jQuery 和 IE8 是否存在已知问题？
Jed 的答案在 IE8 中都不起作用，不是因为 jQuery 坏了，而是因为 IE8 没有隐藏选项！
很好，布赖恩。如果你用这个有用吗？ $("option") .filter( function return(){ this.style.display == "none" }) .parent().not( $(":visible").parent() )
这不太行。你必须更进一步。我已经使用正确的代码添加了社区答案。

【解决方案2】：

// 回答问题，根据需要更改 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");

    }

// 删除空的 optgroups 示例

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

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

    } else {

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

    }

【讨论】：

【解决方案3】：

归功于Jed Schmidt。以下代码适用于 IE8。

请注意，尽管有display: none 样式，IE8 实际上并没有隐藏<option> 元素。此外，IE8 似乎不接受 border 元素的 <optgroup> 样式。

工作示例：http://jsbin.com/aquya（可通过 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
});

【讨论】：

谢谢，这太棒了，至少可以突出显示不幸的是，我真正想做的是隐藏 optgroup，而不是突出显示它。我应该在最初的问题中说 - 我认为这不会有所作为，因为我主要关心的是选择器 - 但事实证明它确实有所作为，因为正如你之前提到的，IE 有一个隐藏选择选项的错误（和 optgroups - 请参阅dev.jquery.com/ticket/1100）。所以看起来我对 IE 不走运
如果你不介意额外的工作和复杂性，你可以通过临时删除你想要隐藏的元素来伪造它（我猜，IE 可能也不喜欢那样）。跨度>

【解决方案4】：

这比我的original answer 性能好得多：

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

【讨论】：

【解决方案5】：

用两条线来做怎么样？一个为每个元素打开它，一个为每个有可见子元素的元素再次关闭？

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

【讨论】：

【解决方案6】：

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

这是一些伪代码

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

【讨论】：