JQuery : 배열 메서드 (each / map / grep / index), 속성 탐색 선택자

소현·2025년 2월 22일

🍵 배열 관련 메서드

태그를 불러오면 태그들은 모두 배열과 같은 공간 안에 담긴다.
배열을 순회하며 특정 기능을 만들고 싶을 때 배열 관련 메서드를 사용한다.

🧃 each() / $.each() ★ 달러가 붙으면 제이쿼리 문법

배열에 저장된 요소를 순서대로 하나씩 선택하며 인덱스 정보 가져옴

[기본형]

$('요소').each(function(매개변수1, 매개변수2){ 코드 });
$.each($ ('요소'), function(매개변수1, 매개변수2){ 코드 });
배열에 저장된 요소 개수만큼 메서드 반복 실행. 실행할 때마다 매개변수1, 2에는 배열에 저장된 요소와 인덱스 값이 배열에 오름차순으로 대입된다.
$('요소').each(function(){ $(this) });
$.each($ ('요소'), function(){ $(this) });
배열에 저장된 요소 개수만큼 메서드 실행. 실행할 때마다 this에는 배열에 저장된 요소가 오름차순으로 대입된다.

<ul id="menu">
      <li>hello</li>
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
    </ul>
    
    <script>
      $(function () {
        let obj = [{ area: "서울" }, { area: "부산" }, { area: "안양" }];

        // obj배열 안 0번 인덱스 area속성값 콘솔 출력
        console.log(obj[0].area);

        // 배열 안을 데이터 개수만큼 반복 순회
        $(obj).each(function (i, o) {
          // i : 인덱스 번호 o : 인덱스 번호 해당 객체
          console.log(i + ":" + o); // i와 o의 데이터 확인
        });

        console.log("-----------------");

        // 태그 개수만큼 반복 순회
        $.each($("#menu li"), function (i, o) {
          // i : 인덱스 번호 o : html의 li요소
          console.log(i + ":" + o);
        });

        console.log("-----------------");

        // 태그 개수만큼 반복 순회
        $("#menu li").each(function (index) {
          // index : 인덱스 번호 (each메서드 실행시마다 불러오는 인덱스 정보)
          // $(this) : 각각의 li정보
          console.log(index + ":" + $(this));
        });
      });
    </script>

🧃 $.map(), $.grep() ★

배열에 저장된 데이터 수만큼 반복 실행
기존 배열은 유지한 채 새로 가공한 배열을 반환받는 경우 사용
each메서드는 기존 배열 자체를 가공함

$.map()
반환된 데이터는 새 배열에 저장되고 새 배열 객체 반환
$.grep()
메서드 실행시마다 매개변수의 데이터와 인덱스가 오름차순으로 대입, 메서드 반환값 true일 경우 데이터가 새 배열에 저장되고 새 배열 반환

[기본형]
1. $.map() 메서드
$.map($ ('요소')또는 array, function(매개변수1, 매개변수2){ return 데이터; })
2. $.grep() 메서드
$.grep($ ('요소')또는 array, function(매개변수1, 매개변수2){ return true or false; })

each와 반대로 매개변수1이 데이터 값, 매개변수2에 인덱스 번호를 대입한다.

<script>
      $(function () {
        let arr1 = [
          { area: "서울", name: "김ㅇㅇ" },
          { area: "부산", name: "이ㅇㅇ" },
          { area: "인천", name: "박ㅇㅇ" },
        ];

        let arr2 = $.map(arr1, function (a, i) {
          if (a.area == "서울") return a;
        });
        console.log(arr2);
        console.log(arr1);

        let arr3 = $.grep(arr1, function (a, i) {
          if (a.area == "인천") {
            return true;
          } else {
            return false;
          }
        });
        console.log("arr3 : ", arr3);
        console.log();
      });
    </script>

🧃 $.inArray() / $.isArray() / $.merge() 메서드

$.inArray() 배열 데이터 중 지정 데이터 인덱스값 반환
$.isArray() 지정 데이터가 배열이면 true 아니면 false
$.merge() 두 배열을 하나로 묶음

[기본형]
$.inArray(data, Array, start index);
$.isArray(object);
$.merge(Array1, Array2);

🧃 $.index() 메서드

지정 요소 인덱스 값 반환

[기본형]
$('요소').index('찾을 요소');

🍵 속성 탐색 선택자

선택 요소 기준으로 일치하는 속성의 포함여부로 요소를 선택
ex) 선택한 img태그 중 alt속성값이 '메인비주얼'인 요소 찾기

[선택자 종류]
1. $('요소[속성]')
선택 요소에 해당 속성이 있는 모든 태그 선택
2. $("요소[속성 = '값']")
선택한 요소의 속성과 값이 일치하는 태그 선택
3. $("요소[속성 ^= '값']")
선택한 요소 중 '값'이라는 단어로 시작하는 태그 선택. 이때 값은 한 단어로 일치해야 함
4. $("요소[속성 $= '값']")
선택한 요소 중 '값'이라는 단어로 끝나는 태그 선택. 이때 값은 한 단어로 일치해야 함
ex) document.querySelector("div[data-src $= '.com']")
5. $("요소[속성 *= '값']")
선택한 요소 중 '값'을 포함하는 태그 선택. 이때 값은 한 단어로 일치하지 않아도 찾음
6. $("요소선택:hidden")
선택한 요소 중 css로 숨긴 요소 선택해 가져옴(display, visibility, overflow)
7. $("요소선택:visible")
선택한 요소 중 화면에 보이는 요소 선택해 가져옴
8. $(":text")
input태그 중 type속성이 text인 요소 가져옴
뒤에는 input의 type속성값들을 쓸 수 있다
9. $(":selected")
selected 속성 적용된 태그 가져옴
10. $(":checked")
checked 속성 적용된 태그 가져옴

소현

이전 포스트