Framework & Library/JQeury

[JQuery] Utility method 유틸리티 메소드

gangintheremark 2023. 7. 14. 15:27
728x90

Jquery의 유틸리티 메소드는 배열 순회, 배열 필터링, 데이터를 배열형식으로 변환, 배열 복제, 데이터의 공백 제거 등 효율적인 프로그램 개발이 가능하다.

메소드 설명
💡 $.each(arr, function) 배열의 데이터를 단순 반복 처리. return false하면 반복처리 중지
💡 $.grep(arr, function) 필터링 후 배열로 반환. 필터링 조건은 함수에서 return
💡 $.map(arr, function) 원본 배열을 함수를 적용하여 가공 후 반환
💡 $.merge(arr1, arr2) arr1과 arr2를 병합하여 arr1에 저장.
💡 $.trim(str) 지정된 문자열의 앞과 뒤의 공백제거 
      // 배열 데이터 관련된 유틸리티 메서드
      var months = ['January', 'February', 'March', 'April', 'May',
        'June', 'July', 'August', 'September', 'October',
        'November', 'December'];

      // 1. 단순반복처리  , return false 하면 반복처리 중지 
      $.each(months, function (idx, obj) { // 반복처리 시 index값과 요소 
        console.log(idx, obj);
        return obj != 'March';  
        /*
           0 'January'
           1 'February'
           2 'March' 
         */
      });

      // 2. 필터링 후 배열로 반환 , 필터링 조건은 func에서 return
      var arr = $.grep(months, function (obj, idx) {
        console.log(idx, obj);
        return obj.length < 5;
      });
      console.log(arr); 
    /*['May', 'June', 'July'] */

      // 3. 원본 배열을 func함수를 적용하여 가공 후 반환
      var arr = $.map(months, function (obj, idx) {
        return obj.substring(0, 3);
      });
      console.log(arr);
      /* ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] */

🍀 li 태그를 반복해서 값을 합계 후 출력

<head>
  <script>
    $(document).ready(function () {
      // li 반복해서 값을 합계 후 출력
	
      var sum = 0;
      
      // $(선택자).each(function(inx,obj){});
      $("li").each(function (idx, ele) {

        console.log($(idx), $(ele), $(this)); // JQuery객체

        var v = $(ele).text(); // $(this).text
        sum += Number.parseInt(v);
      });

      $("#result").text(sum);
    });
  </script>
</head>

<body>
  <ul>
    <li>100</li>
    <li>200</li>
    <li>300</li>
    <li>400</li>
    <li>500</li>
  </ul>
  합계:<div id="result"></div>
</body>
728x90