jQuery：如何处理自闭合标签和多个循环？

Question

我有3个数组：一个带有城市列表，一个带有州列表（与城市相对应），另一个只是删除了重复项的州列表。

我正在尝试生成一个看起来像这样的列表：

• 状态1

• 城市1

• 城市2

• 状态2

• 城市3

这是我得到的：

$.each(stateArrayUnq, function(i) {

    $('#list').append("<li>" + stateArrayUnq[i] + "<ul>");

    $.each(stateArray, function(j) {

        if (stateArray[j] == stateArrayUnq[i]) {

            $('#list').append("<li>" + cityArray[j] + "<\/li>");

        }

    });

    $('#list').append("<\/ul><\/li>");

});

我知道，如果没有浏览器过早地自动关闭标签，就无法构建这样的代码，但是不幸的是，我对如何重新构建标签一无所知。我已经阅读了一些相关的主题，但是我还是很困惑。我认为应该将“附加”代码设置为变量或其他内容，但是我不知道如何处理循环。

感谢您提供的任何帮助。谢谢一堆！

更新：这是我的数组：

var cityArray = ["Concord", "Lafayette", "Lewisville", "Madison", "NW Freeway Houston", "North Miami", "Casselberry", "South Fort Myers", "SW Freeway", "Woodbury", "Tarpon Springs"]

var stateArray = ["North Carolina", "Louisiana", "Texas", "Wisconsin", "Texas", "Florida", "Florida", "Florida", "Texas", "Minnesota", "Florida"]

var statearrayUnq = ["Florida", "Louisiana", "Minnesota", "North Carolina", "Texas", "Wisconsin"]