[英]having issue appending li on to ul
我正在创建一个ul
并使用 jquery append
函数向其中添加li
和其中的数据。 在这个append
函数中,我正在调用另一个函数来解析更多 xml 数据并将其添加到ul
。 但是这个函数只显示[object Object]
。 而当我在func()
函数中使用console.log(li)
它会显示正确的li
。
这是我的代码
container.append(
'<ul>'
+ '<li>'
+ '<h4 class="title stitle">' + from
+ '<section><span class="subtitle">' + routeTime + ' mins ' + routeDist + ' km</span></section><br>'
+ '</h4>'
+ '<ul class="contents">'
+ '<li>' + '<img src="' + walk + '" />' + '</li>'
+ '<li>' + '<span class="">' + startTime + ' ' + distance + ' km</li>'
+ func(lines) //<-- function call here
+ '</ul>'
+ '</li>' +
'</ul>'
);
这是func函数代码
func = function (lines) {
var li = $('<li></li>');
lines.each(function () {
var stopel = $(this),
busCode = stopel.attr('code').slice(1,4),
stops = stopel.find('STOP');
li.append('<img src="' + bus + '" />')
.append('<span>' + busCode + '</span>')
.append('<section class="clear"></section>');
stops.each(function() {
var el2 = $(this).find('NAME'),
deptime = $(this).find('DEPARTURE');
li.append('<p class="stop">' + deptime.attr('time') + ' ' + el2.attr('val') + '</p>');
});
li.append('<p class="last"></p>');
});
console.log(li);
return li;
}
我哪里出错了?
问题是您的函数返回一个 jQuery 对象。 当您在此对象上使用+
运算符时,您将其用作字符串。 因此尝试将其转换为字符串,结果为[object Object]
。
jQuery 对象有一个名为.html()
的方法,该方法以字符串形式返回该 jQuery 对象的 HTML 内容 - 您可以安全地在连接中使用它。 不过,在您的情况下,您需要一个.outerHtml()
方法,该方法在 jQuery 中不存在,但您可以添加它(请参阅此问题)。 或者,您可以简单地使用 DOM(不是 jQuery) .outerHTML
属性,Firefox 过去不支持它,但现在他们支持(从版本 11 开始,如果我错了,请纠正我)。
您可以像这样在func
的返回值上调用该方法:
...
+ '<li>' + '<span class="">' + startTime + ' ' + distance + ' km</li>'
+ func(lines).outerHtml() //<-- function call here
+ '</ul>'
...
或者,如果您想要 DOM 方式:
+ func(lines).get(0).outerHtml //<-- function call here
快速建议:您应该使用像 Mustache(我的偏好)、Handlebars 等模板解决方案。通过在 Javascript 中连接字符串来创建 HTML 是丑陋的,难以维护并且违反了关注点分离规则。 当您尝试这些库之一时,您会想知道没有它您怎么活。
当您执行var li = $("<li></li>")
,您正在传递对为 DOM 创建的 List 对象实例的引用。 您正在操作此对象,因此您将获得作为 [object Object] 的输出,而在控制台中您会看到该对象的 HTML。
您应该将 li 对象引用字符串化或在 $.html(li) 或 li.html() 中使用它;
您正在返回 jQuery 对象,但看起来您想要 HTML。
在函数结束时试试这个:
return li.outerHTML;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.