非表示の要素をfindから除外する [jQuery]

jQueryのfindメソッドは、対象となる要素から、目的の「子要素」を取得することができるメソッドです。

だたし、子要素の表示・非表示関係なく目的の子要素を取得します。

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li style="display:none;">d</li>
</ul>
<script type="text/javascript">
  $(function(){
    let result = $("ul").find("li"); // [li li li li]
    console.log(result.length);      // 4
  });
</script>

もし、表示している子要素のみを取得したい場合は、指定要素に”:visible”をつけましょう

  $(function(){
    let result = $("ul").find("li:visible");  // [li li li]
    console.log(result.length);               // 3
  });

そうすることで、表示している要素だけ取得することができます。

逆に、非表示の子要素のみを取得したい場合場合は”:hidden”をつけます。

  $(function(){
    let result = $("ul").find("li:hidden");  // [li]
    console.log(result.length);              // 1
  });

Related Posts