<ul>
  <li>リストA</li>
  <li>リストB</li>
  <li>リストC</li>
  <li>リストD</li>
</ul>
<button type="button">赤文字へ変更！</button>

<!-- jQuery CDN読み込み -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
$(function() {
  
  // 要素の取得
  const listItems = $('li');
  const button = $('button');

  // ボタンをクリックしたとき
  button.on('click', function() {
    // ループ処理（liタグをすべて赤文字にする）
    listItems.each(function(i, e) {
      $(e).css('color', 'red');
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.