次のHTMLを変更および置換するためにJQueryを使用しています
<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/