정렬 후 html 태그에 배열 요소를 래핑하는 방법은 무엇입니까?

Question

각 배열 요소를 하나의 범위로 래핑하려고합니다. 그래서 나중에 수업을 추가 할 수있었습니다. 그러나 실제로 방법을 이해할 수는 없습니다. 여기 내 코드입니다 :

let hit = 0; 
let pick = props.selected.length; 
let payout = null; 
let currentPayout; 
let pickList = ''; 
props.selected.sort((a, b) => { 
    if (a > b) return 1; 
    if (a < b) return -1; 
    return 0; 
}).forEach((n) => { 
    if (pickList.length) { 
     pickList += ' '; 
    } 
    // Here's the mess, I'd like to be able to wrap each number in a span. 
     pickList =+ n; 
}); 

Answer 1

는 HTML을 생성하려면, 당신이 할 수 있습니다 :

let pickList = props.selected.sort((a, b) => a - b) 
        .map(n => `<span>${n}</span>`) 
        .join(''); 

는 sort가에서-장소 selected 속성을 변이된다는 점에 유의해야합니다. 또한 sort에 전달한 비교 함수는 -1, 0 및 1 이외의 다른 숫자를 반환 할 수 있으므로 (기호 만 중요하고 0 임) 따라서 a - b을 반환하는 것이 좋습니다. 귀하의 질문에 스팬 노드 객체의 배열을 만들 수 있었다면

, 다음을 수행하십시오

let pickList = props.selected.sort((a, b) => a - b) 
    .map(n => { 
     const span = document.createElement('<span>'); 
     span.textContent = n; 
     return span; 
    }); 

지금 선택 목록이 DOM 노드의 배열입니다. 페이지 (문서)에 표시해야하는 경우 배열의 각 노드에 대해 컨테이너 요소에 appendChild 메서드를 사용합니다.