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

Question

I have 3 arrays: one with a list of cities, one with a list of states (which correspond to the cities), and one that's just a list of states with the duplicates removed.

I'm trying to generate a list that looks like this:

• State 1
  • City 1
  • City 2
• State 2
  • City 3

Here's what I've got:

$.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>");
});

I know I can't structure my code like this without having the browser auto-close my tags prematurely, but unfortunately I don't have the slightest idea how to rebuild this. I've read through a few related threads, but I'm still pretty confused. I think I'm supposed to set the "append" code to variables or something, but I don't know how to handle the loops.

I appreciate any help you can give. Thanks a bunch!

UPDATE: Here are my arrays:

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

You can do this by building an html string which is stored in a variable. When you are done with your logic you can append the build html string.

 //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> 

Answer 2

If list were a ul , you could nest them using actual jQuery objects like so.

 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 data = cityArray.map((c,i) => ({state: stateArray[i], city: c})); //flatten the data var $list = data.reduce(($ul, item) => { var $cityLi = $(`<li>${item.city}</li>`); //Create <li> for city var $stateLi = $ul.children(`li[data-state='${item.state}']`); //Find state <li> if (!$stateLi.length) //Create state <li> if it doesn't yet exist $stateLi = $(`<li data-state='${item.state}'>${item.state}<ul></ul></li>`); $stateLi.children("ul").append($cityLi).end().appendTo($ul); //Add the city to the state return $ul; }, $("<ul />")); $("body").append($list); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>