1

使用 JSON，我已成功将结果检索为对象。经过一番努力，我设法让它发挥作用。但是，我将非常感谢“清理”解决方案的任何帮助，因为我已经读过，作为最佳实践，您应该始终将 HTML 和 jQuery 分开。

代码片段可以在下面的链接中找到：

http://jsfiddle.net/xunZU/

var results = $.map(data.GSP.RES.R, function (result) {
    return {
        title: result.T,
        snippet: result.S,
        url: result.U
    };

}); //var results

$.each(results, function (index, obj) {
    $('#results_holder').append('<h2><a href="' + obj.url + '">' + obj.title + '</a></h2>' + '<p>' + obj.snippet + '</p>');
}); //each
4

4 回答 4

2

如果你经常做这种事情，我发现使用模板库非常有帮助。个人使用handlebars.js。使从您的 javascript 中分离标记变得非常简单。

http://handlebarsjs.com/

于 2013-03-27T20:58:50.853 回答
1

将 JS 与 HTML、CSS 与 HTML 等分开是一个好主意，因为它符合分离功能、样式和形式等的做法。

另一方面，时不时地用javascript创建一些元素并没有错，为了清理它，我会这样做：

var results = $.map(data.GSP.RES.R, function (result) {
    return {
        title  : result.T,
        snippet: result.S,
        url    : result.U
    };
});

$.each(results, function (index, obj) {
    var h2 = $('<h2 />'),
        a  = $('<a />', {text: obj.title, href: obj.url}),
        p  = $('<p />', {text: obj.snippet});

    $('#results_holder').append( h2.append(a), p );
});

也$.each适用于对象，这$.map不是真正必要的，你也可以这样做：

$.each(data.GSP.RES.R, function (index, obj) {
    var h2 = $('<h2 />'),
        a  = $('<a />', {text: obj.T, href: obj.U}),
        p  = $('<p />', {text: obj.S});

    $('#results_holder').append( h2.append(a), p );
});
于 2013-03-27T21:05:17.743 回答
0

当然，您可以像这样滚动自己的伪模板引擎：http: //jsfiddle.net/joeframbach/xunZU/1/

通过添加隐藏模板：

<div id="templates" style="display:none;">
<h2><a></a></h2><p></p>
</div>

<div id="results_holder"></div>

并克隆它：

var data = [
    {T: 'foo1', S: 'bar1', U: 'bat1'},
    {T: 'foo2', S: 'bar2', U: 'bat2'},
    {T: 'foo3', S: 'bar3', U: 'bat3'},
    {T: 'foo4', S: 'bar4', U: 'bat4'},
    {T: 'foo5', S: 'bar5', U: 'bat5'},
]
var results = $.map(data, function (result) {
    return {
        title: result.T,
        snippet: result.S,
        url: result.U
    };

}); //var results

$.each(results, function (index, obj) {
    var tpl_h2 = $('#templates h2').clone();
    var tpl_p = $('#templates p').clone();
    tpl_h2.find('a').attr('href',obj.url).html(obj.title);
    tpl_p.html(obj.snippet);
    $('#results_holder').append(tpl_h2).append(tpl_p);
}); //each
于 2013-03-27T21:05:09.640 回答
0

因此，您正在为 DOM 操作寻找“干净”的解决方案。清洁是一个相对的术语。我认为您只想要可维护的东西。如果 HTML 和 Javascript 不同步，它们会变得很麻烦。我不相信有一个正确的答案，但您肯定可以找到适合您或您的团队需要的东西。

正如 joeframbach 所建议的那样，我将建议使用 .clone()，但我会改为使用整个 DOM 元素和一些子类，而不是单独复制元素。那么就不需要对底层元素或结构有任何了解。

这是我的小提琴分支：http: //jsfiddle.net/krets/sESy2/2/

$.each(results, function (index, obj) {
    var tpl = $('#templates').clone();
    tpl.attr('id','unique'+index)
    tpl.find('.linkOne').attr('href',obj.url).html(obj.title);
    tpl.find('.one').html('unique'+index);
    tpl.find('.two').html(obj.snippet);
    tpl.removeClass('hidden')
    $('#results_holder').append(tpl);
}); //each
于 2013-03-27T21:50:18.837 回答