如何用jQuery each循环展示XML全量数据？当前仅显示单条记录

嘿，我来帮你搞定这个问题！你现在只能显示单条记录，核心原因是你在循环里没有针对当前的<time>节点获取对应数据，而是每次都从整个XML文档中全局查找，导致每次都覆盖成第一条的数据，而且现有的HTML结构是单个容器，无法承载多条记录。下面是具体的修复方案：

问题分析 #

你的原代码里，在$(xml).find('forecast time').each()循环中，使用xml.find("name")、xml.find("time").attr("day")这类写法，都是从整个XML文档中查找第一个匹配的元素，所以不管循环多少次，都只会拿到第一条记录的数据，并且每次赋值都会覆盖之前的内容。

修复步骤 #

1. 调整HTML结构 #

首先把原来的单个展示标签改成一个用来承载所有记录的容器，我们可以用一个<div>来包裹每条天气预报的内容，比如：

<div id="weather-container"></div>

这样我们可以动态生成每条记录的HTML，然后追加到这个容器里。

2. 修改jQuery代码 #

在循环中，我们要使用$(this)来指代当前的<time>节点，然后从这个节点内部查找对应的子元素（比如temperature、wind等），同时获取城市名称这类全局信息只需要获取一次即可，不需要放在循环里。

修改后的jQuery代码如下：

$(document).ready(function(e) {
  $("#Button").on('click', function(){
    loading(true);
    $.ajax({
      type:"GET",
      url: url,
      dataType:'text',
      success: function(data){
        var xmlDoc = $.parseXML(data);
        var xml = $(xmlDoc);
        // 获取全局的城市名称，只需要一次
        var cityName = xml.find("name").text();
        var countryName = xml.find("country").text();
        // 清空容器，避免多次点击重复添加
        $("#weather-container").empty();
        
        // 遍历每个time节点
        $(xml).find('forecast time').each(function(){
          var $currentTime = $(this);
          // 获取当前time节点的属性和子元素数据
          var date = $currentTime.attr("day");
          var minTemp = $currentTime.find("temperature").attr("min") + "°C";
          var maxTemp = $currentTime.find("temperature").attr("max") + "°C";
          var rain = $currentTime.find("precipitation").attr("value") || "0mm";
          var wind = $currentTime.find("windSpeed").attr("mps") + " mps";
          var humidity = $currentTime.find("humidity").attr("value") + "%";
          var cloudDesc = $currentTime.find("clouds").attr("description");

          // 动态生成单条记录的HTML
          var weatherItem = `
            <div class="weather-item">
              <h3>${cityName}, ${countryName}</h3>
              <p><strong>Date:</strong> ${date}</p>
              <p><strong>Rain:</strong> ${rain}</p>
              <p><strong>Wind:</strong> ${wind}</p>
              <p><strong>Temp Range:</strong> ${minTemp} - ${maxTemp}</p>
              <p><strong>Humidity:</strong> ${humidity}</p>
              <p><strong>Cloud:</strong> ${cloudDesc}</p>
              <hr>
            </div>
          `;
          // 追加到容器中
          $("#weather-container").append(weatherItem);
        });
        loading(false);
      },
      error: function(){
        loading(false);
        alert("Failed to load weather data!");
      }
    });
  });
});

代码解释 #

• 全局信息只获取一次：城市名称、国家名称这类整个XML中只有一次的内容，我们在循环外面就获取好，避免重复查找。
• 使用$(this)指代当前节点：在each循环中，this就是当前的<time>元素，用$(this)包装后，就可以在这个节点内部查找对应的子元素，确保拿到的是当前记录的数据。
• 动态生成HTML：通过模板字符串创建每条记录的DOM结构，然后追加到容器中，这样每条记录都会被单独展示，不会被覆盖。
• 清空容器：在每次请求成功后先清空容器，避免多次点击按钮导致重复添加记录。

可选：添加基础样式 #

为了让展示更美观，可以加一点CSS样式：

.weather-item {
  padding: 15px;
  margin: 10px 0;
  border: 1px solid #eee;
  border-radius: 8px;
}
.weather-item hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 10px 0;
}

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