1

私はかなり典型的なJSONリクエストを実行し、JRendereテンプレートにデータを入力しています。それはうまく機能しますが、liをhrefでラップすると、すべてのフォーマットが失われます。

HTMLコード：

<script id="recipeTemplate" type="text/x-jquery-tmpl"> 

                {{for Content}}
                <a href='searchResults.html' data-transition='slide'>
                <li class="ui-li ui-li-static ui-body-c" style='height: 150px; border: 0px; margin-left: 20px; margin-right: 20px;'>
                        <img src="{{:ImageURL}}" style='max-height: 125px; max-width: 125px;  position: absolute;'/>
                         <div style='margin-left: 50px;'>
                             <h3  style="white-space : normal;">{{:Title}}</h3>
                             <h3  style="white-space : normal;">Ratings:</h3>
                             <p style="white-space : normal;">{{:Description}}</p>
                        </div>

                </li>
                </a>
                {{/for}}
        </script>

JSは次のとおりです。

$("#search").focusout(function()
{
    var searchTerm = $("#search").val();
    $.getJSON("http://website?searchterm=" + searchTerm + "&callback=?",
    function (data)
    {
        var htmlString = $("#recipeTemplate").render( data );
        $('#results').html(htmlString).listview('refresh');
    });
});

エラー

上記のように見えます。なぜCSSを失うのですか？

ありがとう、Graeme。

4

1 に答える 1

2

それはうまく機能しますが、liをhrefでラップすると、すべてのフォーマットが失われます。

まず第一に<li>、タグ内にあること<a>は無効なHTMLです。

CSSは、特定の順序に依存している可能性が高く、要素をターゲットにしてから、その要素内に特定のクラスを持たなければならない別の要素をターゲットにしている可能性があります。

<a>要素の周囲を追加することで<li>、予想される順序が変更され、CSSはセレクターと一致しなくなります。

<a>代わりにタグを内部に配置する<li>と、CSSをそのまま維持すると同時に、有効なHTMLである可能性があります。ただし、最終的なHTMLに一連の'が含まれているul、またはolその周辺にあると仮定します。li

CSSをチェックして、ネストされた要素またはクラスの予想される順序を混乱させていないことを確認してください。<a>次に、CSSを壊さないようにassするか、新しい階層に一致するようにCSSを更新します。

于 2012-09-21T22:50:45.537 に答える