在JavaScript中实现数组指定字段出现后添加换行

你的代码当前的问题是：每个非第一个州的城市都会被插入换行，而非在整个州的内容结束后添加分隔。原因是displayCity函数每次处理单个城市就会执行换行判断，没有区分“同一个州的城市”和“不同州的城市”的边界，同时API回调是异步的，顺序也可能不受控。

下面提供两种可行的解决方案：

方案一：跟踪上一个渲染的州名，按需插入分隔 #

通过记录上一次渲染的州名称，当当前要渲染的城市所属州与上一个不同时，在当前城市前插入换行分隔：

// 新增变量记录上一个完成渲染的州
let lastRenderedState = null;
var multipleCityAqiElement = document.getElementById('multiple-city-aqi');

function displayCity(aqi, stateTitle) {
    var cityAqiWidget = document.createElement('div');
    cityAqiWidget.className = 'city-aqi-widget';
    cityAqiWidget.innerHTML = '<h2>' + stateTitle + '</h2>' + aqi.text("%details<br><br>");
    
    // 仅当切换到新州时插入分隔
    if (lastRenderedState !== null && lastRenderedState !== stateTitle) {
        var stateSeparator = document.createElement('div');
        stateSeparator.style.clear = 'both';
        // 可选：添加类名方便自定义样式
        stateSeparator.className = 'state-separator';
        multipleCityAqiElement.appendChild(stateSeparator);
    }
    
    multipleCityAqiElement.appendChild(cityAqiWidget);
    // 更新记录的上一个州
    lastRenderedState = stateTitle;
}

方案二：按州创建容器，结构化组织内容 #

这种方法更语义化，先为每个州创建独立的容器，将该州所有城市的AQI内容放入对应容器，通过CSS即可轻松实现州之间的分隔：

var states = [
    {
        title: "Wilayah Persekutuan",
        cities: ["kuala-lumpur", "malaysia/w.p.-putrajaya/putrajaya", "malaysia/wilayah-persekutuan/labuan"]
    },
    {
        title: "Perak",
        cities: ["ipoh", "malaysia/perak/tanjung-malim"]
    },
    ...
];

var aqiWidgetConfig = [];
var multipleCityAqiElement = document.getElementById('multiple-city-aqi');

// 预先创建所有州的容器并存储
const stateContainers = {};
states.forEach(state => {
    const stateContainer = document.createElement('div');
    stateContainer.className = 'state-container';
    // 仅渲染一次州标题，避免重复
    stateContainer.innerHTML = `<h2>${state.title}</h2>`;
    multipleCityAqiElement.appendChild(stateContainer);
    stateContainers[state.title] = stateContainer;
});

// 配置API回调
states.forEach(function(state) {
    state.cities.forEach(function(city) {
        aqiWidgetConfig.push({
            city: city,
            callback: function(aqi) {
                displayCity(aqi, state.title);
            }
        });
    });
});

_aqiFeed(aqiWidgetConfig);

function displayCity(aqi, stateTitle) {
    var cityAqiWidget = document.createElement('div');
    cityAqiWidget.className = 'city-aqi-widget';
    cityAqiWidget.innerHTML = aqi.text("%details<br><br>");
    // 将城市内容放入对应州的容器
    stateContainers[stateTitle].appendChild(cityAqiWidget);
}

然后在CSS中添加州容器的分隔样式：

.state-container {
    margin-bottom: 20px; /* 州之间的间距 */
    clear: both;
}

这种方案的优势是结构清晰，后续维护州级别的样式或功能会更方便，也避免了异步回调带来的顺序问题。

内容的提问来源于stack exchange，提问作者Mathavan Krishnan