如何在排序後將數組元素包裝到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; 
    }); 

現在PICKLIST是DOM節點的數組。如果需要在頁面（文檔）上顯示它們，則對容器元素上的每個節點使用appendChild方法。