0

次の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>

さらに(関連している可能性が高いと思います)、天気予報セクションの下の\nwithの置換は<br />、最初の試合以上は機能せず、その理由について途方に暮れています.

誰かがここで何らかの形で支援できる場合は、本当に感謝しています。

ここにフィドルがありますので、何が起こっているかを見ることができます: http://jsfiddle.net/4UyAj/

4

0 に答える 0