配列/オブジェクトをネストされたリストに変換することに関するいくつかの質問を見てきましたが、私の問題に関連する質問は 1 つしか見つかりませんでした。要素の子にアクセスするいくつかの方法を試しましたが、コードがさらに壊れるだけです。
ネストされた順序付けられていないリストがあります。
<div id="sortableSitemap">
<ul class="sortable ui-sortable">
<li id="world_news_now"><div>World</div>
<ul>
<li id="the_news"><div>The News</div></li>
</ul>
</li>
<li id="sports_news_cool"><div>Sports</div></li>
</ul>
</div>
現時点では、3 つのアイテムが含まれており、次のように表示されます。
-World
--The News
-Sports
さまざまな深さを持つ任意の数のノードが存在する可能性があります。リストを追加情報とともに配列に格納しようとしています。
各ノードは、深さに関係なく、表示される順序に基づいて数値の連続した ID (最初のノードは 1、2 番目は 2) を取得します (つまり、世界 = 1、ニュース = 2、スポーツ = 3)。また、ノードの親 (ルートは 0) の ID も保存したいと考えています。したがって、親 ID は、World = 0、The News = 1、Sports = 0 になります。
リストが上記のような場合を除いて、以下のコードは機能するようです。その場合、The News = 3 とその親 = 2 (Sports) を割り当てます。何らかの理由で、アイテム (子) を繰り返し処理すると<ul>、 open の直後であっても最後まで処理されてしまいます<li>。
私が見つけた 1 つを除くすべての jQuery ソリューションは深さを無視します。それでも、実際の親ノードの ID が必要です (現在、レベルを下げたかどうかに基づいてスタックに保持しています)。
これはなぜですか? また、リストを再帰的に処理するようにコードを変更するにはどうすればよいですか?
var count = 0;
var pages = [];
var parentStack = [];
function createNewLevel(items) {
var length = items.length;
for (var i = 0; i < length; i++) {
if (items[i].tagName == 'UL') {
parentStack.push(count);
createNewLevel($(items[i]).children().get());
parentStack.pop();
} else {
++count;
pages.push({
pId: parentStack[parentStack.length - 1],
urlStr: $(items[i]).attr('id'), myId: count
});
}
}
}
createNewLevel($('#sortableSitemap ul').get());
console.log(pages);
更新:コードがどのように機能しないかを示すjsFiddleを次に示します("The News" には、親ノードとして "World" が必要です)。