求助：jQuery实现搜索历史列表每行显示单个城市失败

我看到你遇到的问题了——每次搜索新城市后，搜索历史里的所有城市都挤在一行，尝试添加<br>标签也没效果对吧？咱们来一步步解决这个问题：

问题根源 #

你当前的代码里，直接把searchHistory数组拼接到了单个<li>标签中：

$("#history").html('<li>' + searchHistory + '<br></li>')

当JavaScript把数组转换成字符串时，会自动用逗号分隔所有元素，最终所有城市都会被塞进同一个列表项里，自然无法单独成行，添加<br>也起不到作用。

解决方案 #

我们需要给每个城市单独创建一个列表项，可以用数组的map方法遍历历史记录，为每个城市生成对应的<li>元素，再把它们拼接成完整的HTML字符串插入到页面中：

修改JavaScript中的这一行代码：

// 替换原来的$("#history").html(...)代码
const historyItems = searchHistory.map(city => `<li>${city}</li>`).join('');
$("#history").html(historyItems);

代码解释 #

• map(city =>
• ${city}
)：遍历searchHistory数组，每个城市都会被包裹在一个独立的<li>标签中
• .join('')：把所有生成的<li>字符串拼接成一个完整的HTML片段
• $("#history").html(historyItems)：把拼接好的HTML插入到历史记录容器中

这样每个城市都会作为独立的列表项存在，默认情况下<li>是块级元素，会自动单独占一行，不需要额外添加<br>标签。

额外优化建议 #

从语义化角度来说，搜索历史是一个列表，建议把HTML中的<div id="history" class="col-2">改成<ul id="history" class="col-2">，这样更符合HTML的语义规范，也能利用浏览器默认的列表样式。

修改后的HTML片段：

<ul id="history" class="col-2"> </ul>

完整修改后的JavaScript代码 #

$(document).ready(function() { 
  let searchHistory = []; 
  $('#submitWeather').click(function(e) { 
    e.preventDefault(); 
    var city = $('#city').val(); 
    searchHistory.push(city); 
    // --- 这里是修改的部分 ---
    const historyItems = searchHistory.map(city => `<li>${city}</li>`).join('');
    $("#history").html(historyItems);
    // --- 修改结束 ---
    if (city != '') { 
      //---------AJAX------------ 
      $.ajax({ 
        url: 'https://api.openweathermap.org/data/2.5/forecast?appid=34fd31758b449ea433e05058c225793c&q=' + city + "&units=imperial&count=10", 
        type: "GET", 
        dataType: "jsonp", 
        success: function(data) { 
          var widget = show(data); 
          console.log("here"); 
          $("#show").html(widget); 
          //----------- Forecast Widget ------------ 
          var widget2 = ''; 
          for (var i in data.list) { 
            if (i > 0 && data.list[i].dt_txt.indexOf("12:00") > -1) { 
              console.log(data.list[i].dt_txt); 
              var code = [ 
                '<div class="col-2 day">', 
                '<p>', data.list[i].dt_txt.split(' ')[0], '</p>', 
                //weather icon 
                '<img src="http://openweathermap.org/img/wn/' + data.list[i].weather[0].icon + '@2x.png">', 
                '<p> Temp:', data.list[i].main.temp, ' degrees</p>', 
                '<p> Humidity: ', data.list[i].main.humidity, '%</p>', 
                '<p> Wind speed: ', data.list[i].wind.speed, ' MPH</p>', 
                '</div>' 
              ]; 
              widget2 += code.join(''); 
            } 
          } 
          $(".5day").html(widget2); 
          $("#city").val(''); 
        } 
      }); 
    } else { 
      $("#error").html('Field cannot be empty'); 
    } 
  }); 
}); 

function show(data) { 
  console.log("show: ", data); 
  // return of today's weather 
  return '<h3>' + data.city.name + ' (' + data.list[0].dt_txt.split(' ')[0] + ') </h3>' + 
         '<p><strong>Temp: </strong>' + data.list[0].main.temp + ' degrees</p>' + 
         '<p><strong>Humidity: </strong>' + data.list[0].main.humidity + ' %</p>' + 
         '<p><strong>Wind Speed: </strong>' + data.list[0].wind.speed + ' MPH</p>'; 
}

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