jQuery를 사용한 리스트 아이템의 데이터 매핑하기

jQuery의 map() 메서드는 선택한 요소 집합에 대해 함수를 실행하여 새로운 배열을 반환하는 데 사용됩니다. 이를 활용하여 리스트 아이템에 대한 데이터를 매핑하고 조작할 수 있습니다. 아래 예제를 통해 map() 메서드를 사용하여 리스트 아이템의 데이터를 매핑하는 방법을 알아보겠습니다.

예제 1: 리스트 아이템의 텍스트를 배열로 매핑하기

var listItemTexts = $("li").map(function() {
    return $(this).text();
}).get();
console.log(listItemTexts);

이 예제는 페이지에서 모든 리스트 아이템의 텍스트를 가져와 배열로 매핑합니다. 그리고 이 배열을 콘솔에 출력합니다.

예제 2: 리스트 아이템의 길이를 배열로 매핑하기

var listItemLengths = $("li").map(function() {
    return $(this).text().length;
}).get();
console.log(listItemLengths);

이 예제는 페이지에서 모든 리스트 아이템의 텍스트 길이를 가져와 배열로 매핑합니다. 그리고 이 배열을 콘솔에 출력합니다.

예제 3: 리스트 아이템의 순서를 배열로 매핑하기

var listItemIndexes = $("li").map(function(index) {
    return index + 1;
}).get();
console.log(listItemIndexes);

이 예제는 페이지에서 모든 리스트 아이템의 순서를 가져와 배열로 매핑합니다. 그리고 이 배열을 콘솔에 출력합니다.