0

XML からネストされたリストを作成しようとしていますが、.append 関数が HTML タグをオートコンプリートしているように見えます。これは便利ですが、不要な場合にこの操作をオーバーライドする方法、または以下を実行するよりスマートな方法があります。 :

$('#name').html('<li>'+'Origin'+'<ul>'+' ' ).html();
$(this).find("origin").each (function() {
var name = '<li>origin: ' + $(this).text() + '</li>';
$('#name').append(name);
$('#name').append('</ul></li>');

私が得るもの：

<ul id="name">
<li>
Origin
<ul> </ul>
</li>
<li>origin: network</li>
<li>origin: nevil-nmshub</li>
<li>origin: origin_overide</li>
<li>origin: Support_4</li>
<li>origin: test-origin</li>
</ul>

ご覧のとおり、必要になる前にタグを追加しています。多分私はこれについて間違っていると思います、何かアドバイスはありますか？

4

3 に答える 3

1

コードを次のように変更します。

var ul = $('<ul />');

// I believe you mean to find elements with class origin instead of <origin>
$(this).find(".origin").each (function() {
   var name = '<li>origin: ' + $(this).text() + '</li>';
   ul.append(name);
});
$('#name').append(ul);
于 2012-05-23T12:33:41.820 に答える
1

.append()( と同様に) はDOM 要素全体.innerHTMLのみを挿入でき、任意の HTML の不完全なスニペットは挿入できません。

したがって、定義上、初めて.append()何かを行うと、その中のタグは暗黙的に閉じられます。

代わりにこれを試してください：

var $li = $('<li>').appendTo('#name');
var $ul = $('<ul>').appendTo($li);
$(this).find("origin").each(function() {
    $('<li>', { text: 'origin: ' + $(this).text() }).appendTo($ul);
});
于 2012-05-23T12:37:42.323 に答える
0

HTML を動的に作成する場合は、開始タグと終了タグをできるだけ分離しないでください。

次のように実行できます。

$('#name').append('<li>Origin<ul></ul></li>');

// I think 'origin' is an XML tag.
// So no worries, you can call in like an HTML element
$(this).find('origin').each(function(index, value) {
    $('#name ul').append('<li>origin: ' + value + '</li>')
});
于 2012-05-23T13:05:52.493 に答える