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

Working example.

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

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

Answer 2

这比我的original answer表现要好得多：

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

Answer 3

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

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

Answer 4

信用转到Jed Schmidt。以下代码适用于IE8。

请注意，尽管<option>样式，IE8实际上并不隐藏display: none元素。此外，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
});

Answer 5

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

    }

Answer 6

您需要比较所有的数组：visible vs.隐藏

这里有一些伪代码

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

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

6 个答案: