jquery 객체를 배열 객체 배열로

머리말

웹 개발에서는 탁월한 JavaScript 라이브러리인 jQuery를 사용하여 DOM(문서 개체 모델)을 작동하는 경우가 많습니다. jQuery는 요소 선택, 이벤트 추가 등과 같은 작업을 단순화하는 일련의 기능을 제공합니다. 그러나 jQuery로 작업할 때 때때로 jQuery 개체를 JavaScript 배열 또는 개체 배열로 변환해야 합니다. 어떤 경우에는 jQuery 객체의 요소를 탐색하고 수정해야 하기 때문입니다.

이 글에서는 주로 jQuery 객체가 배열과 객체 배열로 변환되는 방식을 소개하고, 독자들이 참고할 수 있는 몇 가지 실제 적용 시나리오를 제공합니다.

jQuery 객체를 배열로 변환

jQuery에서는 toArray() 함수를 사용하여 jQuery 객체를 배열로 변환할 수 있습니다. 이 함수는 jQuery 개체의 모든 요소를 ​​JavaScript 배열로 변환하고 배열을 반환합니다.

예를 들어 다음 HTML 조각이 있다고 가정합니다.

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

다음 코드를 사용하여 이 페이지의 모든 li 요소를 가져올 수 있습니다.

var $myList = $('#myList');
var $myListItems = $myList.find('li'); // 获取所有的li元素

이제 $myListItems는 jQuery 개체입니다. console.log() 함수를 사용하여 내용을 볼 수 있습니다.

console.log($myListItems);

콘솔에서 다음과 같은 출력을 볼 수 있습니다.

[li, li, li]

이 출력은 $myListItems가 세 개의 li 요소를 포함하는 jQuery 객체임을 나타냅니다. toArray() 함수를 사용하여 이를 JavaScript 배열로 변환합니다.

var myListItemsArray = $myListItems.toArray();

이제 myListItemsArray는 세 개의 li 요소를 포함하는 JavaScript 배열입니다.

jQuery 객체를 객체 배열로 변환

jQuery 객체를 JavaScript 배열로 변환하는 것 외에도 때로는 객체 배열로 변환해야 할 때도 있습니다. 이 목표를 달성하기 위해 map() 함수를 사용할 수 있습니다. map() 함수는 jQuery 개체를 반복하고 각 요소에 대해 콜백 함수를 실행한 다음 각 요소의 반환 값을 새 배열로 결합하고 해당 배열을 반환합니다.

아래의 실제 예를 고려해보세요. 다음과 같은 사용자 데이터가 포함된 JSON 개체가 있다고 가정해 보겠습니다.

var users = [
  {"id": 1, "name": "Alice", "age": 23},
  {"id": 2, "name": "Bob", "age": 27},
  {"id": 3, "name": "Charlie", "age": 31},
  {"id": 4, "name": "David", "age": 19},
  {"id": 5, "name": "Emma", "age": 25},
  {"id": 6, "name": "Frank", "age": 36},
  {"id": 7, "name": "Grace", "age": 32},
  {"id": 8, "name": "Henry", "age": 41},
  {"id": 9, "name": "Ivy", "age": 28}
];

이제 이 데이터를 기반으로 사용자 이름과 연령이 포함된 HTML 목록을 만들어야 합니다. jQuery를 사용하여 다음 목록을 만들 수 있습니다.

var $userList = $('<ul>');
$(users).map(function(index, user) {
  var $userListItem = $('<li>');
  $userListItem.text(user.name + ' (' + user.age + ')');
  $userList.append($userListItem);
});

이제 사용자 데이터가 포함된 목록을 만들었습니다. 다음 목록 요소를 문서에 추가할 수 있습니다.

$('body').append($userList);

이 예에서는 map() 함수를 사용하여 사용자 데이터를 개체 배열로 변환한 다음 사용자 정보가 포함된 HTML 목록을 만듭니다.

요약

이 문서에서는 jQuery 개체를 JavaScript 배열 및 개체 배열로 변환하는 방법을 설명합니다. toArray() 함수를 사용하여 jQuery 객체를 JavaScript 배열로 변환하고, map() 함수를 사용하여 jQuery 객체를 객체 배열로 변환할 수 있습니다. 이러한 기술은 DOM 요소 탐색 및 수정, JSON 데이터 처리 등 웹 개발의 일반적인 문제를 처리할 때 유용합니다.

위 내용은 jquery 객체를 배열 객체 배열로의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!