追加子项并排序动态列表

Question

我有一张地图，其 features 随地图范围而变化。函数 renderListings 为每个要素创建一个元素 item，然后在每次地图更改时将所有项目添加到 listingEl。到目前为止，一切正常。

每个item的innerHTML是基于特征的一个属性——prop.code，是一串文本。此时函数以无序方式而不是按字母顺序附加项目。

我曾尝试将 .sort() 添加到 listingEl.appendChild(item).sort()，但随后只有一个项目出现在列表中，所有其他项目都消失了。

如何根据 javascript 中的属性 prop.code 特征按字母顺序追加子项？

var listingEl = document.getElementById('feature-listing');


function renderListings(features) {
    // Clear any existing listings
    listingEl.innerHTML = '';
    if (features.length) {
        features.forEach(function(feature) {
            var prop = feature.properties;
            var item = document.createElement('a');
            item.target = '_blank';
            item.innerHTML = '<div style ="display:inline;">   ' + prop.code + ' </div>' 


            listingEl.appendChild(item);

        });

Answer 1

只需在将功能添加到列表之前对其进行排序。

var listingEl = document.getElementById('feature-listing');

function renderListingsSorted(features) {
    var sortedFeatures = sortFeaturesByCode(features);
    renderListings(sortedFeatures);
}

function sortFeaturesByCode(features) {
    return features.sort(function(f1, f2){
        var code1 = f1.properties.code;
        var code2 = f2.properties.code;
        return code1.localeCompare(code2);
    });
}

function renderListings(features) {
    // ...
}

追加子项并排序动态列表

Append child and sort dynamic list

javascript

sorting

jquery

mapbox-gl