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？

谢谢，格雷姆。

4

1 回答 1

2

它很好用，但是当我将 li 包装在 href 中时，它会丢失所有格式。

首先，在标签<li>内包含一个<a>无效的 HTML。

您的 CSS 很可能依赖于特定的顺序，以一个元素为目标，然后可能是另一个元素，该元素必须在该元素内具有特定的类，依此类推。

通过<a>在元素周围添加，<li>您现在已经更改了预期的顺序，并且您的 CSS 不再能够匹配选择器。

将您的<a>标签放在in 中<li>可以保持 CSS 完整，同时是有效的 HTML，好吧，假设您在最终 HTML 中具有ul或ol围绕 's 集。li

检查你的 CSS 并确保你没有弄乱嵌套元素或类的预期顺序。然后要么屁股，<a>所以它不会破坏 CSS 或更新 CSS 以匹配你的新层次结构。

于 2012-09-21T22:50:45.537 回答