javascript - jQuery:如何处理自关闭标签和多个循环？

Question

我有 3 个数组:一个包含城市列表，一个包含州列表(与城市相对应)，还有一个只是删除了重复项的州列表。

我正在尝试生成一个如下所示的列表:

• State 1
  • City 1
  • City 2
• State 2
  • City 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"]

Answer 1

您可以通过构建存储在变量中的 html 字符串来实现此目的。完成逻辑后，您可以附加构建 html 字符串。

//Test data
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"];

//Generate the html string and append it.
var html = "";

$.each(stateArrayUnq, function(i) {
  html += "<li>" + stateArrayUnq[i] + "<ul>";
  $.each(stateArray, function(j) {
    if (stateArray[j] == stateArrayUnq[i]) {
      html += ("<li>" + cityArray[j] + "<\/li>");
    }
  });
  html += "<\/ul><\/li>";
});

$('#list').append(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
  <p>test</p>
</div>