我正在使用jquery,jstree,jade和nodejs。 我的目标是动态生成树,但失败了。
内联javascript代码工作正常,但是没有树输出。 当我检查html时,很明显,玉石在打开li标签之前先关闭了第一个ul标签。
这是玉码:
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js')
script.
$(document).ready(function() {
$('#selTree').jstree(ghcomp);
});
body
#selTree
ul
-for(let r=1; r<ghcomp.length; r++) {
-for(let gh in ghcomp[r]) {
li #{gh}
ul
-for(let c=0; c<ghcomp[r][gh].length; c++) {
li #{ghcomp[r][gh][c].comp}
-}
-}
-}
这是玉作为输出产生的:
<div id="selTree"><ul></ul><li>I<ul></ul><li>B</li></li><li>L<ul></ul><li>1</li><li>2</li></li><li>M<ul></ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>e</li></li><li>Production<ul></ul><li>virtual</li></li><li>Tech<ul></ul><li>na</li></li><li>Themato<ul></ul><li>C1</li><li>C2</li><li>C3</li><li>C4</li><li>C5</li><li>C6</li><li>C7</li><li>C8</li></li></div>
如何在这里控制生产过程?
例如:我可以轻松地即时生成HTML。我可以把它交给玉吗?
谢谢。
答案 0 :(得分:1)
您可以使用本机Jade iteration重写此代码,它将为您正确构建DOM,更不用说读取和调试都容易得多。我还建议在像这样的复杂嵌套迭代中使用更具描述性的变量名。
ul
each gh, ghIndex in ghcomp
li= gh
ul
each c in gh
li= c
如果您发布了供Jade模板使用的JSON,则可以更轻松地准确地了解您要在此处执行的操作,但这是我看到的问题:
Jade在将li
嵌入到其中之前先关闭ul标签的原因是您没有缩进下一行,因此它将成为ul的同级项,而不是子项:
ul
-for(let r=1; r<ghcomp.length; r++) {
和
ul
-for(let c=0; c<ghcomp[r][gh].length; c++) {
这些应更改为(如果您坚持使用此方法):
ul
-for(let r=1; r<ghcomp.length; r++) {
和
ul
-for(let c=0; c<ghcomp[r][gh].length; c++) {