Question

我正在接收来自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。

Answer 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');

如果您以前从未这样做，那么这里是Templating的介绍。 http://stephenwalther.com/archive/2010/11/30/an-introduction-to-jquery-templates.aspx

Answer 2

要创建新元素，您可以使用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>');

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

希望有所帮助。

用来自JSON调用的内容替换div

2 个答案: