これが私が表現する必要のあるIAです。（ツリーモデル）
about us
company
history
location
ceo
product
mobile
iphone
galaxy 3
そして、これは私が作成する必要のあるHTMLDOMです。ご覧のとおりdepth2、depth3（最大5または6）はDOMの同じレベルにあり、depth1には子としてそれらがあります（CSSのためにこの方法を作成する必要があります）
<div class="depth1"><span>about us</span>
<div class="depth2">company</div>
<div class="depth2">ceo</div><!--CEO is here! not below "location" -->
<div class="depth3">history</div>
<div class="depth3">location</div>
</div>
<div class="depth1"><span>product</span>
<div class="depth2">mobile</div>
<div class="depth3">iphone</div>
<div class="depth3">galaxy 3</div>
</div>
そして、このようにデータが挿入されmysqlます。（p_id親のIDを意味します）
id(pk) p_id level order name
------------------------------------------
1 root 0 0 -
2 1 1 100 about us
3 7 2 100 mobile
4 5 3 200 location
5 2 2 100 company
6 5 3 100 history
7 1 1 200 product
8 3 3 100 iphone
9 3 3 200 galaxy
10 2 2 200 ceo
試しましorder by level, orderたが、結果が正しくありません（順序はHTML DOMの順序と同じである必要があります）
id(pk) p_id level order name
------------------------------------------
1 root 0 0 -
2 1 1 100 about us
7 1 1 200 product
3 7 2 100 mobile
5 2 2 100 company
10 2 2 200 ceo
8 3 3 100 iphone
6 5 3 100 history
4 5 3 200 location
9 3 3 200 galaxy
HTMLの注文と同じように注文するにはどうすればよいですか？
最も難しい部分は、親（depth1）の下に（グループとして）並んでいるdepth2か、並んでいます。depth3
id(pk) p_id level order name
------------------------------------------
1 root 0 0 -
2 1 1 100 about us
5 2 2 100 company
10 2 2 200 ceo
6 5 3 100 history
4 5 3 200 location
7 1 1 200 product
3 7 2 100 mobile
8 3 3 100 iphone
9 3 3 200 galaxy 3
jQuery問題を解決するコードを作成しました。しかしjQuery、実際のデータは非常に大きく（数百）、HTML要素を再配置するのに時間がかかるため、適用できません。クライアント側に負担をかけることはできません。
jQueryのパフォーマンスを向上させる方法を検索しました。しかし、私はユーザーのjavascriptが無効になっていることを考慮する必要があります。
トリックでさえ、あなたの異なる視点や新鮮なアイデアを共有してください。（表現言語はJSPです）ありがとう。