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

Here's my goal: do something on an element, an <optgrooup>, if all of its children are invisible.

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

My code below outlines the in red if it has any invisible children. But I want to do so only if all the children are invisible. If the element has any children that are visible, then don't highlight it.

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

How can I tweak the jQuery selector to do that?

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

Thanks in advance.

提前致谢。

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

Screenshot of image here: http://img144.imageshack.us/img144/556/selectexample.gif

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

6 个解决方案

#1

Assuming you want to exclude elements with no child elements:

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

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

Working example.

UPDATE: This has much better performance than my original answer:

更新:这比我原来的答案有更好的表现:

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

#2

This has much better performance than my original answer:

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

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

#3

How about two lines to do it? One to turn it on for every single element, and one to turn it off again for every one with a visible child?

两条线怎么办呢?一个是为每一个元素打开它,另一个是为每个有可见孩子的人再次关闭它?

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

#4

Credit goes to Jed Schmidt. The following code works in IE8.

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

Note that IE8 does not actually hide the <option> elements despite the display: none style. Also IE8 doesn't seem to accept border styles for <optgroup> elements.

请注意,尽管display:none样式,IE8实际上并不隐藏元素的边框样式。

Working sample: http://jsbin.com/aquya (Editable via http://jsbin.com/aquya/edit)

工作样本: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
});

#5

// answer to question changing css as desired

//根据需要回答改变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");

    }

// remove empty optgroups example

//删除空的optgroups示例

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

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

    } else {

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

    }

#6

You'll need to compare an array of all the :visible vs. :hidden

你需要比较所有的数组:visible vs.:hidden

here is some pseudo code

这是一些伪代码

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

#1