:visible 可視な要素

最後に:visibleフィルタです。これは、:hiddenフィルタの逆で、 visibilityがhidden以外のものと displayがnone以外の要素、あるいは、input要素のtype属性が"hidden"以外のすべての要素にマッチします。

下記の「click!」というボタンをクリックしてみてください。

さようなら



ソースは次の通りですが、ボタンをクリックすると、 ID名が「#my1」要素内にあるvisibility:hidden;以外のdiv要素を非表示(不可視化)にします。
<div id="my1">
  <div style="width:300px;
              padding:12px;
              background-color:gold">さようなら</div>
  <br>
  <button id="btn1">click!</button>
</div>

<script type="text/javascript">
jQuery(function($){
  $("#btn1").click(function(){
    $("div:visible","#my1")
        .css("visibility","hidden")
  })
});
</script>


では、もうひとつ、display:none以外の要素を試してみます。 下記の「click!」というボタンをクリックしてみてください。

さようなら



ソースは次の通りで、今度は、ボタンをクリックすると、 ID名が「#my2」要素内にあるdisplay:none;以外のdiv要素を非表示(不可視化)にしているわけです。
<div id="my2">
  <div style="width:300px;
              padding:12px;
              background-color:gold">さようなら</div>
  <br>
  <button id="btn2">click!</button>
</div>

<script type="text/javascript">
jQuery(function($){
  $("#btn2").click(function(){
    $("div:visible","#my2")
        .css("display","none")
  })
});
</script>
もし、「.css("visibility","hidden")」の部分を :hidden 不可視な要素 display:none の逆で「.fadeOut()」 と書けば、フェイドアウトでdisplay:noneとなります。

inputタイプのhiddenについても試してみましょう。 下記の「click!」というボタンをクリックしてみてください。

ソースは次の通り。今度は、input要素の中で「type="hidden"」以外の要素の数を返します。
<form id="myform1">
  <input type = "hidden" name="h1">
  <input type = "hidden" name="h2">
  <input type = "button" id="btn3" value = "click!">
</form>

<script type="text/javascript">
jQuery(function($){
  $("#btn3","#myform1").click(function(){
    alert("visibleの数 : "+$(":visible","#myform1").length);
  })
});
</script>





※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。