Question

我正在使用jquery ul函数创建li并向其中添加append数据。在这个append函数中，我调用另一个函数来解析更多的xml数据并将其添加到ul。但此功能仅显示[object Object]。然而，当console.log(li)内func()运行时，它会显示正确的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;
}

我在哪里弄错了？

Answer 1

问题是你的函数返回一个jQuery对象。当您在此对象上使用+运算符时，您将其用作字符串。因此，尝试将其转换为字符串，结果为[object Object]。

jQuery对象有一个名为.html()的方法，它以字符串形式返回该jQuery对象的HTML内容 - 您可以在串联中安全地使用它。但是在你的情况下，你需要一个.outerHtml()方法，这个方法在jQuery中不存在，但你可以添加它（参见this question）。或者你可以简单地使用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是丑陋的，难以维护并违反了separation of concerns的规则。当您尝试使用其中一个库时，您会想知道如果没有它，您将如何生活。

Answer 2

当你这样做的时候 var li = $("<li></li>")，您正在传递对为DOM创建的列表对象的实例的引用。您正在操作此对象，因此您将输出作为[对象对象]，而在控制台中您将看到该对象的HTML。

你应该对li对象引用进行字符串化或在$ .html（li）或li.html（）中使用它;

Answer 3

您正在返回jQuery对象，但看起来您想要HTML。

在功能结束时尝试此操作：

return li.outerHTML;

有问题追加到ul

3 个答案: