8

これが私の目標です<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

4

6 に答える 6

13

子要素を持たない要素を除外したい場合:

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

作業例。

更新:これは私の元の答えよりもはるかに優れたパフォーマンスを持っています:

$(":hidden").parent().not( $(":visible").parent() )
于 2009-05-08T19:39:51.643 に答える
2

これは私の元の答えよりもはるかに優れたパフォーマンスを持っています:

$(":hidden").parent().not( $(":visible").parent() )
于 2009-05-08T20:07:22.123 に答える
1

それを行うには2行はどうですか？1 つの要素ごとにそれをオンにし、1 つの子が表示されているすべての要素に対して再びオフにしますか?

$('#availableInstanceId > *').css("border","3px solid red");
$('#availableInstanceId > * > *:visible').parent().css("border","none");
于 2009-05-08T19:39:21.380 に答える
1

クレジットはJed Schmidtに送られます。次のコードは IE8 で動作します。

スタイルにかかわらず、 IE8 は実際には<option>要素を非表示にしないことに注意してください。また、IE8 は要素のスタイルdisplay: noneを受け入れないようです。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
});
于 2009-05-08T22:31:22.887 に答える
0

すべての :visible と :hidden の配列を比較する必要があります

ここにいくつかの擬似コードがあります

if ($("#element:hidden").length == $("#element:visible").length) {
  // Do  stuff
} ...
于 2009-05-08T19:32:25.890 に答える