2

作成中の Web ページに動的に読み込まれた HTML コンテンツをいじっています。私が欲しいのは、javascript/jquery と ajax 要求を使用して動的に Web ページにインポートされるスニペットを含む HTML ファイルのリストを用意することです。これにより、たとえば、いくつかのブログ投稿を個別のファイルとして保存し、複数の投稿を含むページを動的に構築できます。

以下は、タイトルと小さな表だけのスニペットの例です。

CSS :

#swimTimes2{
    background-color: #eee;
}

HTML ソース :

<div id="itemContainer">
    <div id='swimTimes2' class='item'>
        <h1> Swim Times </h1>
        <table>
            <tr class="tableHead">
                <td>Weekdays</td><td>Weekends</td><td>Holidays</td></tr>
            <tr>
                <td>7:00am-9:00am</td><td>10:30am-8:00pm</td><td>11:00am-4:00pm</td></tr>
            <tr>
                <td>11:00am-2:00pm</td></tr>
            <tr>
                <td>4:00pm-10:30pm</td></tr>

        </table>

    </div>
</div>

を使用すること$.get()で、上記のスニペット ファイルの内容を読み込んでから、jquery を使用して必要な html スニペット (この場合は #itemContainer の内容) を検索できることがわかりました。

ジャバスクリプト

$(document).ready( function(){
    loadContent('content/content_1.html');
});


function loadContent(fileName){

    $.get(fileName, function(data){

        var htmlContents = $(data).find("#itemContainer").children('.item').html();
        var id = $(data).find("#itemContainer").children('.item').attr('id');
        $('#content').append($('<div class="item" />').attr('id', id).html(htmlContents));

        var styleEl = $(data).find("style");
        $('head').append(styleEl);

    });
}

したがって、$.get()ハンドラー関数の最初の 3 行が機能します。スニペットをインポートして、HTML ページに配置できます。ここで、スニペットからメイン ページに css スタイルもインポートしたいと思います。この例では、アイテムに灰色の背景を指定しました。これは、メインの html ページから取得できないプロパティです。

私が抱えている問題は、スニペットのスタイル要素がメイン ページにインポートされていることはわかっていますが、含まれている css ルールがインポートされた html に適用されないことです。私は何が欠けていますか？

4

1 に答える 1

1

jQuery APIで 2 番目の例と同様のことができます

var styleProps = $(this).css( ["width", "height", "color", "background-color"] );
$.each( styleProps, function( prop, value ) {
  html.push( prop + ": " + value );
});

$( "#result" ).html( html.join( "<br>" ) );

唯一のマイナス点は、必要な.css属性をリストする必要があることです。ただし、可能なすべての属性を配置してもnull、値が指定されていない限り、真に何もないため、おそらく機能します''

于 2013-06-28T12:33:46.110 に答える