我正在使用 JQuery 来修改和替换以下 HTML
<div class="weather-feed">
<img src="http://l.yimg.com/a/i/us/we/52/32.gif"/><br />
<b>Current Conditions:</b><br />
Sunny, 17 C<BR />
<BR /><b>Forecast:</b><BR />
Wed - Mostly Sunny. High: 27 Low: 14<br />
Thu - Mostly Sunny. High: 25 Low: 14<br />
Fri - Partly Cloudy. High: 26 Low: 15<br />
Sat - Partly Cloudy. High: 27 Low: 17<br />
Sun - Partly Cloudy. High: 28 Low: 17<br />
<br />
<a href="http://us.rd.yahoo.com/dailynews/rss/weather/Pretoria__SF/*http://weather.yahoo.com/forecast/SFXX0044_c.html">Full Forecast at Yahoo! Weather</a><BR/><BR/>
(provided by <a href="http://www.weather.com" >The Weather Channel</a>)<br/>
</div>
此代码通过 PHP 会话检索到页面(特别是 div 中)。div 只是用来帮助选择(以及稍后的样式)。
因为很多这些 HTML 没有任何可识别的容器,所以我使用正则表达式来隔离某些文本(例如天气状况和预报):
$(document).ready(function() {
var src = $(".weather-feed");
// remove line feeds
src.find("br").remove();
// get weather conditions
var result = "<div class=\"weather-conditions\">";
result += src.html().match(/<\/b>([^<]*)<b>/)[1].trim();
result += "</div>";
// get weather icon
result += "<div class=\"weather-icon\"><img src=\"" + src.find("img").attr("src") + "\" /><span><?php echo($city); ?></span></div>";
// more button
result += "<div class=\"weather-more-button\">+</div>";
// get weather forecast
result += "<div class=\"weather-extra\">";
result += "<div class=\"weather-forecast\">";
result += src.html().match(/<\/b>([^<]*)<a/)[1].trim().replace("\n", "<br />");
result += "</div>";
// get addition forecast link
result += "<div class=\"weather-detail\">";
result += $("<div/>").html(src.find('a').first()).html();
result += "</div></div>";
console.log(result);
// write new code to page
src.empty();
src.append(result);
});
不幸的是,虽然 jquery 没有产生错误并result
正确记录(见下文)到控制台,但新代码并未呈现到页面。我所看到的仍然是 PHP 返回的原始代码。
<div class="weather-conditions">
Sunny, 17 C
</div>
<div class="weather-icon">
<img src="http://l.yimg.com/a/i/us/we/52/32.gif" />
<span>Pretoria</span>
</div>
<div class="weather-more-button">+</div>
<div class="weather-extra">
<div class="weather-forecast">
Wed - Mostly Sunny. High: 27 Low: 14<br />
Thu - Mostly Sunny. High: 25 Low: 14
Fri - Partly Cloudy. High: 26 Low: 15
Sat - Partly Cloudy. High: 27 Low: 17
Sun - Partly Cloudy. High: 28 Low: 17
</div>
<div class="weather-detail">
<a href="http://us.rd.yahoo.com/dailynews/rss/weather/Pretoria__SF/*http://weather.yahoo.com/forecast/SFXX0044_c.html">Full Forecast at Yahoo! Weather</a>
</div>
</div>
此外(我认为这很有可能是相关的),在天气预报部分下替换\n
with并不能超过第一场比赛,我不知道为什么会这样。<br />
如果有人能以任何方式在这里提供帮助,我将不胜感激。
这是一个小提琴,所以你可以看到发生了什么:http: //jsfiddle.net/4UyAj/