jQuery - 可視フィルター

公開日:2018-12-10 更新日:2019-05-14
[jQuery]

1. 概要

可視フィルターで要素を指定します。

$("セレクタ:hidden")   //inputタグのhidden、または非表示の要素
$("セレクタ:visible")  //表示されている要素

2. サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <!-- 画面 -->
  <div id="a">
      <div style="display:none">A-0</div>
    <input type="hidden" value="A-1" />
                          <div >A-2</div>
                         <span >A-3</span>
  </div>
  
  <!-- Script -->
  <script>
    $(function(){

      //対象:非表示になっている要素 -> 表示する
      $("div:hidden").css("display", "block");
      
      //対象:inputタグの hidden -> コンソールに value を出力する
      console.log( $("input:hidden").val() );

      //対象:spanタグの表示されている要素 -> 文字を赤くする
      $("span:visible").css("color", "red");

    });
  </script>

</body></html>


実行結果:画面

A-1