SeouliteLab

jQuery .toArray() 메소드: 요소를 배열로 변환하기 본문

카테고리 없음

jQuery .toArray() 메소드: 요소를 배열로 변환하기

Seoulite Lab 2024. 4. 9. 08:40

예제 1: 선택된 요소를 배열로 변환하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .toArray() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var elements = $("div").toArray();
      console.log(elements);
      // 결과 확인을 위해 콘솔에 출력
    });
  </script>
</head>
<body>

<div>첫 번째 DIV</div>
<div>두 번째 DIV</div>
<div>세 번째 DIV</div>

</body>
</html>

설명:

위 예제에서는 jQuery .toArray() 메소드를 사용하여 선택된 요소를 JavaScript 배열로 변환하는 방법을 보여줍니다.

  • $("div") 선택자를 사용하여 모든 div 요소를 선택합니다.
  • .toArray() 메소드를 사용하여 선택된 div 요소를 JavaScript 배열로 변환합니다.
  • 변환된 배열은 JavaScript의 배열 형식으로 콘솔에 출력됩니다.

예제 2: 변환된 배열을 반복문으로 순회하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .toArray() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var elements = $("p").toArray();
      elements.forEach(function(element) {
        console.log(element.textContent);
        // 결과 확인을 위해 콘솔에 텍스트 내용 출력
      });
    });
  </script>
</head>
<body>

<p>첫 번째 단락</p>
<p>두 번째 단락</p>
<p>세 번째 단락</p>

</body>
</html>

설명:

이 예제에서는 .toArray() 메소드로 변환된 배열을 반복문을 사용하여 순회하는 방법을 보여줍니다.

  • $("p") 선택자를 사용하여 모든 p 요소를 선택합니다.
  • .toArray() 메소드를 사용하여 선택된 p 요소를 JavaScript 배열로 변환합니다.
  • forEach() 메소드를 사용하여 배열을 순회하면서 각 요소의 텍스트 내용을 콘솔에 출력합니다.

jQuery .toArray() 메소드를 사용하면 선택된 요소를 JavaScript 배열로 변환할 수 있습니다. 이를 통해 jQuery로 선택된 요소를 JavaScript의 배열 메소드를 활용하여 다양한 작업을 수행할 수 있습니다. 위 예제들을 통해 .toArray() 메소드의 활용법을 익혀보세요.

저작자표시 비영리 변경금지