jquery - 我如何修改这个 jQuery XML 解析器？

Question

我有这个新闻解析器。我需要在这里添加图像。它们的超链接将从 XML 中解析。如何升级我的 xmlParser？我需要 div 中的图像通过 CSS 为图像提供正确的位置。并将 CSS 类分配给此图像的 div。

我已经尝试添加

<div class="articleimg">' + <img src='"+$(this).find("image").text()+"'/> + '</div>

但似乎我的语法不正确。添加这样的代码后，带有 append 的完整行将如何显示？

从头部:

function xmlParser(xml) {

$('#load').fadeOut();

$(xml).find("item").each(function () {

    $(".main").append('<div class="article"><div class="title">' + $(this).find("title").text() + '</div><div class="full">' + $(this).find("description").html() + '</div><div class="date">Добавлена: ' + $(this).find("pubDate").text() + '</div></div>');
    $(".article").fadeIn(500);
});}

来自正文:

<div class="main">
<div id="loader" class="loader"><img src="../images/theme/loader.gif" alt="loader" id="load" width="64" height="64" style="vertical-align:middle;"/></div>
</div>

来自 xml 文件:

<?xml version="1.0" encoding="utf-8" ?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
xmlns:media="http://search.yahoo.com/mrss/">
<channel>
<item>
<title>Title</title>
<description>Description</description>
<image>http://website.com/images/news/news.png</image>
<pubDate>2018/03/10 00:00:00 GMT+3</pubDate>
</item>
</channel>
</rss>

Answer 1

是的，您必须使用 img 标签在脚本中更新您的 append()。你只是有点误会你的引号 ' 和 "

'<div class="article"><div class="title">'

在''里面。这是一个字符串。没关系。

下一步

+<img src='"+$(this).find("image").text()+"'/> -

此处 - 看起来像需要解释的 javascript 代码。但它也是带有 HTML 的字符串。所以你必须用引号把它包起来。

为了更好地理解，我将刺标记为粗体。都在里面'

+'"/>'

所以你的代码是

$(".main").append('<div class="article"><div class="articleimg"><img src="'+$(this).find("image").text()+'"/></div><div class="title">' + $(this).find("title").text() + '</div><div class="full">' + $(this).find("description").html() + '</div><div class="date">Добавлена: ' + $(this).find("pubDate").text() + '</div></div>');

---

我删除了多余的引号。

'<div>'+'<img'+ variable +'>'+'</div>'

与

相同

'<div><img'+ variable +'><div>'