时间戳

首页 > 解决方案 > jQuery：如何处理自闭合标签和多个循环？

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

问题描述

我有 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"]

标签： javascriptjquery

解决方案

您可以通过构建一个存储在变量中的 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>

推荐阅读