2

ツリービューに HTML 構造を表示する必要があります。jQuery ツリービュー プラグインをいくつか見つけましたが、通常はリストが必要です。

単純な HTML を見てみましょう (ノードには「div」だけでなく、さまざまなタグがある場合があります)。

<div id="node1">
    <div id="node2">
        <div id="node3"></div>
        <div id="node4"></div>
    </div>
<div>

次のように表示したい：

  • ノード1
    • ノード2
      • ノード3
      • ノード4

    • 今のところ、この jQuery プラグインを使用しています: treeview

    したがって、HTML を次のような順序付けられていないリストに変換する必要があります。

    <ul>
    <li>node1
        <ul>
            <li>node2
                <ul>
                    <li>node3</li>
                    <li>node4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

    jQueryを使用してこれを行うにはどうすればよいですか? 別のアプローチの方が良いと思われる場合は、お知らせください。

    4

    1 に答える 1

    5

    ほら…楽しかった。 デモ - タグに固有のものではなく、文字列divに変換できる要素を返すように更新されましたhtml。

    $.fn.convertToUL = function(isTop) { 
    if(isTop==null) isTop=true;
    var ul=$("<ul>");
    var li=$("<li>");
    li.append($(this).attr("id"));
    var children=0;
    $(this).children().each(function(){
        ul.append($(this).convertToUL(false));
        children++;
    });
    if(children>0)
        li.append(ul);
    if(li.is(':empty'))
        return "";
    if(isTop)
        return $("<ul>").append(li);
    return li;
}

//to get text of elements use .wrap('<div/>').parent().html()
var ulElement=$("#node1").convertToUL();
alert(ulElement.wrap('<div/>').parent().html());
$("#node1").replaceWith(ulElement);
    于 2013-02-27T19:55:22.683 に答える