:visible【表示要素】セレクタ
:hidden【非表示要素】セレクタ

メモ

構文

【表示要素】セレクタ
jQuery( ":visible" ) 1.0

【非表示要素】セレクタ
jQuery( ":hidden" ) 1.0

関連


<div id="id1">
  <p>【表示対象】</p>
  <p>[<input id="input-normal">]:&lt;input id="input-normal"&gt; (通常表示要素)</p>
  <p>[<input id="input-visibility" style="visibility:hidden;">]:&lt;input id="input-visibility" style="visibility:hidden;"&gt; (visibility:hidden)</p>
  <p>[<input id="input-opacity" style="opacity:0;">]:&lt;input id="input-opacity" style="opacity:0;"&gt; (opacity:0)</p>
  [<br id="br-normal">]:&lt;br id="br-normal"&gt;
  <p>[<span id="span_normal">(span)</span>]:&lt;span id="span_normal"&gt;(span)&lt;/span&gt;
  [<span id="span_empty"></span>]:&lt;span id="span_empty"&gt;&lt;/span&gt;</p>

  <hr id="hr">

  <p>【非表示対象】</p>
  <p>[<input id="input-display-none" style="display:none;">]:&lt;input id="input-display-none" style="display:none;"&gt; (display:none)</p>
  <p>[<input id="input-type-hidden" type="hidden">]:&lt;input id="input-type-hidden" type="hidden"&gt; (type属性:hidden)</p>
  [<fieldset id="fieldset-hidden" hidden>
    [<input id="input-inside">]:&lt;input id="input-inside"&gt;
  </fieldset>]:&lt;fieldset id="fieldset-hidden" hidden&gt; (hidden属性 内部に表示要素)
  [<script></script>]:&lt;script&gt;&lt;/script&gt;
  [<style>
   </style>]:&lt;style&gt;&lt;/style&gt;

</div>

<p id="output11" style="border:1px black solid;"></p>
<p id="output12" style="border:1px black solid;"></p>

<script>
var msg;
var elms;
var count;
// $( ":visible" )
elms = $( "#id1 :visible" );
count = 0;
msg = "";
for (var i = 0; i < elms.length; i++) {
  if ((elms[i].tagName !== "P") || (elms[i].id !== "")) {
    msg += "<br>[" + elms[i].tagName + "] " + elms[i].id;
    count++;
  }
}
msg = '$( ":visible" ) idがない&lt;p&gt;は排除<br>項目数 = ' + count + msg;
$( "#output11" ).append(msg);

elms.css( "border", "2px red dashed");
$( "#id1 p:not([id])" ).css( "border", "none");

// $( ":hidden" )
elms = $( "#id1 :hidden" );
elms.css( "border", "2px blue dashed");
msg = '$( ":hidden" ) <br>項目数 = ' + elms.length;
for (var i = 0; i < elms.length; i++) {
  msg += "<br>[" + elms[i].tagName + "] " + elms[i].id;
}
$( "#output12" ).append(msg);
</script>

【表示対象】

[]:<input id="input-normal"> (通常表示要素)

[]:<input id="input-visibility" style="visibility:hidden;"> (visibility:hidden)

[]:<input id="input-opacity" style="opacity:0;"> (opacity:0)

[
]:<br id="br-normal">

[(span)]:<span id="span_normal">(span)</span> []:<span id="span_empty"></span>


【非表示対象】

[]:<input id="input-display-none" style="display:none;"> (display:none)

[]:<input id="input-type-hidden" type="hidden"> (type属性:hidden)

[]:<fieldset id="fieldset-hidden" hidden> (hidden属性 内部に表示要素) []:<script></script> []:<style></style>