0

我正在接收来自 JSON 调用的内容，我想填充 3 个在news_item类中返回响应的对象，如下所示：

<div class="news"> 
        <div class="news_item" style="margin-left: 0 !important;">

        <div class="ni_image">
            <a href="/HaberDetay/TITLE/ID"><img src="IMAGE"width="203" height="109"/></a>
        </div>
        <div class="ni_text">
            <div class="ni_text_title">TITLE</div>
            <div class="ni_text_content"> 
                CONTENT
            </div>
        </div>
        </div> 
</div>

我能够接收如下数据。但不太确定如何填充news_item上面的 div。我还需要清除news 并用来自 JSON 响应的数据替换所有内容。

var newsByCity = JSON.parse(msg);

                $.each(newsByCity, function (key, item) {
                    alert("Code: " + item.City + " ,Name: " + item.Title + " ,Country: " + item.County);

                });

任何指针？我怎样才能做到这一点？

编辑：我回来了 TITLE、ID、CONTENT 等。我只需要看看如何创建这个新的 div。

4

2 回答 2

1

请注意，jQuery 模板仍处于测试阶段（可以在这里进行 DL：https ://github.com/jquery/jquery-tmpl ）

创建此 HTML 的 jQuery 模板，其中包含标题/ID/内容等，它们将出现在${TITLE}/etc 中。基本上是这样的：

<div class="news_item" style="margin-left: 0 !important;">
    <div class="ni_image">
        <a href="/HaberDetay/${TITLE}/${ID}"><img src="IMAGE"width="203" height="109"/></a>
    </div>
    <div class="ni_text">
        <div class="ni_text_title">${TITLE}</div>
        <div class="ni_text_content"> 
            ${CONTENT}
        </div>
    </div>
</div>

然后只需创建模板并将其附加到新闻中。

$('#yourTemplateScriptArea').tmpl(newsByCity).appendTo('.news');

如果您以前从未做过模板，这里有一个介绍模板。 http://stephenwalther.com/archive/2010/11/30/an-introduction-to-jquery-templates.aspx

于 2012-12-12T21:05:47.190 回答
1

要创建新元素，您可以使用 JS 或 jQuery 创建它们。jQuery 更简单，但开销更大。

// Element to append to
var target = $('.news');

// Create the new element in a jQuery object
// and use the appendTo method to attach it
// to the DOM element
$('<div />').html('<p>New div created</p>')
            .appendTo(target);

或者，您可以找到现有的 dom 元素并替换文本或 HTML

var target = $('.news');

// Replacing text
target.find('.ni_text_title').text('New news title');

// Replacing HTML
target.find('.ni_text').html('<div class="ni_news_text">...</div>');

您可以通过将空字符串传递给.htmland.text方法来清空元素的文本或 HTML 内容。如果将它们留空，该方法将返回该元素的当前文本或 HTML。

希望有帮助。

于 2012-12-12T21:08:05.637 回答