More than 3 years have passed since last update.

【jquery】filter()の使い方奇数行を非表示

Last updated at 2021-09-03Posted at 2021-09-02

#jQuery

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <ul>
      <li>リスト 項目 1</li>
      <li>リスト 項目 2</li>
      <li>リスト 項目 3</li>
      <li>リスト 項目 4</li>
      <li>リスト 項目 5</li>
      <li>リスト 項目 6</li>
  </ul>
  <button>ここをクリック</button>
  <p style="display: none;"> 表示されました</p>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function(){
        $('li').filter(':even').hide();
        $('button').on('click', () => {
            $('p').show();
        });
      });
    </script>

#出力結果

リスト 項目 2
リスト 項目 4
リスト 項目 6

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【jquery】filter()の使い方 奇数行を非表示

【jquery】filter()の使い方奇数行を非表示