$().each()

자바스크립트

by somiyuralove 2020. 10. 5. 00:10

jquery에서 선택된 DOM 요소의 집합에 대해 루프를 돌면서 처리할 수 있는 기본 메서드인 $().each를 제공함

아래 예제를 실행해 보면 감이 확 올듯합니다.

<html>
<head>
  <meta http-equiv="content-Type" content="text/html;charset=UTF-8" />
  <title>
    Looping through a set of selected result
  </title>
  <style type="text/css">
    .even
    {
      background-color: #ffffff;
    }
    .odd
    {
      background-color: #cccccc;
    }
  </style>
  <script type="text/javascript">
   (function ($) {
     $(document).ready(function () {
       $("ul > li").each(function (i) {
         if(i % 2 == 1) {
           $(this).addClass("odd");
          } else {
           $(this).addClass("even");
          }
        });
      });
    }) (jQuery);
  </script>
</head>
<body>
  <h2>
  Family members
  </h2>
  <ul>
    <li>Ralph</li>
    <li>Hope</li>
    <li>Brandon</li>
    <li>Jordan</li>
    <li>Ralphie</li>
  </ul>
</body>
</html>

위의 예제는 사람이름을 비정렬 목록(ul)로 가지고 있고 각 목록의 각항목에 대해 번걸아 가면서 배경색을 설정하는 예제입니다.

'자바스크립트' 카테고리의 다른 글

window.open 사용법 (0)	2021.03.23
javascript filter 함수 (0)	2020.10.14
jquery end (0)	2020.09.29
jquery prepend (0)	2020.09.29
jquery data() 함수 (0)	2020.09.28