2

jquery関数を使用して、データを作成しulて追加しています。この関数内で、別の関数を呼び出して、さらにxmlデータを解析し、それをに追加しています。ただし、この関数は。のみを表示します。一方、関数内にいると、正しいが表示されます。liappendappendul[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;
}

どこを間違えているの？

4

3 に答える 3

1

問題は、関数がjQueryオブジェクトを返すことです。また、+このオブジェクトで演算子を使用している場合は、文字列として使用しています。そのため、それを文字列に変換しようとし、結果は。になり[object Object]ます。

.html()jQueryオブジェクトには、そのjQueryオブジェクトのHTMLコンテンツを文字列として返すというメソッドがあります。これは連結で安全に使用できます。ただし、あなたの場合、.outerHtml()jQueryには存在しないメソッドが必要になりますが、それを追加することはできます（この質問を参照）。あるいは、単にDOM（jQueryではなく）プロパティを使用することもできます。Firefox.outerHTMLはこれをサポートしていませんでしたが、現在はサポートしています（バージョン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（私の好み）やハンドルバーなどのテンプレートソリューションを使用する必要があります。Javascriptで文字列を連結してHTMLを作成するのは醜く、維持が難しく、関心の分離のルールに違反します。これらのライブラリの1つを試してみると、それなしでどうやって生きていけるのか不思議に思うでしょう。

于 2012-11-17T12:29:49.733 に答える
1

を行う var li = $("<li></li>")と、DOM 用に作成されたリスト オブジェクトのインスタンスへの参照が渡されます。このオブジェクトを操作しているため、出力は [object Object] として取得されますが、コンソールではそのオブジェクトの HTML が表示されます。

li オブジェクト参照を文字列化するか、$.html(li) または li.html(); で使用する必要があります。

于 2012-11-17T12:43:51.337 に答える
0

jQueryオブジェクトを返していますが、HTMLが必要なようです。

関数の最後にこれを試してください。

return li.outerHTML;
于 2012-11-17T12:29:06.360 に答える