Question

我有一个脚本，它通过AJAX抓取一些JSON，并使用函数将其插入两列，将数据插入到一个简单的HTML模板中：

function projectTemplate(obj) {
    var template = '<div class="result '+searchResults+'"><a href="'+obj.url+'"><span class="title">'+obj.title+'</span><span class="desc">'+obj.desc+'</span></a><span class="topics">'+obj.topics+'</span>';
    if (obj.status != '') {
        template += ' | <span class="status">'+obj.status+'</span></div>';
    }
    template += '</div>';
    return template;
}

function processResults(data) {
    ajaxData = $.parseJSON(data);
    [...]
    if (typeof ajaxData.pages !== 'undefined') {
        var resultCount = 0, displayCount = 0;
        for (var key in ajaxData.pages) {
            resultCount++;
        }
        for (var key in ajaxData.pages) {
            var obj = ajaxData.pages[key];
            if (searchResults) {
                $('.col-left').append(projectTemplate(obj));
            } else {
                if (displayCount < (resultCount/2)) {
                    $('.col-left').append( projectTemplate(obj) );
                } else {
                    $('.col-right').append( projectTemplate(obj) );
                }
                displayCount++;
            }
            //console.log(key);
        }
    } else {
        $('.results h2 span').text('');
        var pageType = (searchResults) ? 'pages' : 'projects';
        $('#ajax-article-list .col-left').html('<strong class="no">No ' + pageType + ' found.</strong>');
    }
}

问题是IE8循环遍历ajaxData.pages中的每个元素，但它似乎将结果追加到另一个上面，所以我最终只有一个（即使我知道还有更多）。 Firebug Lite只显示一个条目。有问题的页面在http://www.climatexchange.org.uk/adapting-to-climate-change/，虽然它遍布整个网站。

有什么想法吗？它似乎不是一个CSS问题，因为节点没有物理地添加到DOM，所以我认为它必须是append()的问题，但我看不到任何有效的代码由模板生成（这似乎是IE8跳过append()的一种情况。

编辑：问题在于模板功能，而不是append()。如果我删除测试

    if (obj.status != '') {
        template += ' | <span class="status">'+obj.status+'</span></div>';
    }

它在IE8中运行良好。我现在很难找到一个在IE8中运行的测试（所有其他浏览器似乎都可以测试空字符串）。

Answer 1

您确定obj始终拥有属性status。你能检查一下：

if ( ( obj.status != "undefined" ) && ( obj.status != '' ) ) {
    template += ' | <span class="status">'+obj.status+'</span></div>';
}

Answer 2

我在测试中有一个</div>，在它外面有一个，因此模板生成的标记无效。 IE8在无效标记上绊倒，而更好的浏览器更宽容。

IE8追加仅运行一次

2 个答案: