jquery에서 목록을 배열로 변환

jQuery를 사용하여 JavaScript 코드를 작성할 때 목록을 배열로 변환해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery의 일부 메소드를 사용하여 목록을 배열로 변환하는 방법을 다루므로 이를 더 잘 이해하고 사용할 수 있습니다.

1. jQuery의 맵 메소드를 사용하세요

jQuery의 맵 메소드는 목록의 각 요소를 새 값으로 변환한 다음 이러한 새 값을 새 배열로 구성하여 반환할 수 있습니다. 따라서 jQuery의 map 메소드를 사용하여 목록을 배열로 변환할 수 있습니다.

샘플 코드는 다음과 같습니다.

var list = $("ul li");  //获取 <ul> 元素中的所有 <li> 元素
var array = $.map(list, function(item) {
  return item.textContent;
});
console.log(array);

위 코드에서는 먼저 jQuery의 $() 메서드를 사용하여 모든

요소가 포함된 목록을 가져와서 변수 목록에 저장합니다. 그런 다음 jQuery의 map 메소드를 사용하여 목록의 각 요소를 반복하고 해당 내용(textContent)을 새 배열의 요소 값으로 사용합니다. 마지막으로 새 배열을 콘솔에 인쇄합니다.

2. jQuery의 Each 메소드를 사용하세요

map 메소드를 사용하는 것 외에도 jQuery의 Each 메소드를 사용하여 목록을 배열로 변환할 수도 있습니다. Each 메소드는 배열과 객체를 순회하는 일반적인 메소드입니다. 이 메소드는 각 데이터 조각에 대해 동일한 작업을 수행할 수 있습니다. map 메소드와 달리 Each 메소드는 새로운 배열을 반환하지 않고, 데이터 처리 결과를 원래 배열에 저장합니다.

샘플 코드는 다음과 같습니다.

var list = $("ul li");  //获取 <ul> 元素中的所有 <li> 元素
var array = [];  //创建一个空数组，用于存储处理后的结果
$.each(list, function(index, item) {
  array.push(item.textContent);
});
console.log(array);

위 코드에서는 먼저 jQuery의 $() 메서드를 사용하여 모든

요소가 포함된 목록을 얻고 이를 변수 목록에 저장합니다. 그런 다음 빈 배열을 만들어 처리된 결과를 저장하고, Each 메서드를 사용하여 목록의 각 요소를 반복하고 해당 콘텐츠(textContent)를 배열에 넣습니다. 마지막으로 새 배열을 콘솔에 인쇄합니다.

3. JavaScript의 Array.from 메서드를 사용하세요

jQuery에서 기본 JavaScript의 Array.from 메서드를 사용하여 목록을 배열로 변환할 수도 있습니다. 이 메서드는 배열과 유사한 객체(예: DOM 노드 목록) 또는 반복 가능한 객체(예: 세트 및 맵)를 실제 배열로 변환합니다.

샘플 코드는 다음과 같습니다.

var list = $("ul li");  //获取 <ul> 元素中的所有 <li> 元素
var array = Array.from(list).map(function(item) {
  return item.textContent;
});
console.log(array);

위 코드에서는 먼저 jQuery의 $() 메서드를 사용하여 모든

요소가 포함된 목록을 얻고 이를 변수 목록에 저장합니다. 그런 다음 기본 JavaScript Array.from 메서드를 사용하여 목록을 배열로 변환하고, map 메서드를 사용하여 새 배열을 반복하여 각 요소의 텍스트 콘텐츠가 포함된 배열로 변환합니다. 마지막으로 새 배열을 콘솔에 인쇄합니다.

결론

이 기사의 도입부를 통해 jQuery에서 목록을 배열로 변환하는 방법을 이해했다고 믿습니다. map 메소드와 각 메소드를 사용하면 목록의 각 요소에 대해 보다 정교한 처리를 수행할 수 있으며, Array.from 메소드를 사용하면 배열 같은 객체를 실제 배열로 쉽게 변환할 수 있다는 점은 주목할 만합니다. 따라서 실제 필요에 따라 적절한 방법을 선택하면 코드의 효율성과 가독성을 더 높일 수 있습니다.

위 내용은 jquery에서 목록을 배열로 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!