我正在尝试构建一个工具来动态构建和编辑JSON文件，我创建了一个HTA，它将为每种数据类型动态创建元素，并使用li和ul在UI中构建它。
<li type='list'>
<span>Name</span>
<div> bunch of html that has hidden edit pop up windows and other controls </div>
<li><ul> sub entries </ul></li>
</li>每种类型的条目都有一个。它从模板文件库中提取这些模板。我遇到的问题是遍历完成的UI来构建JSON文件。即使<li><ul></ul></li>在父li的内部，但当我试图遍历DOM来获取所有内容时，它似乎将所有li视为处于同一级别。很难把它简化成一个小例子放在这里，因为整个过程都需要其他文件来工作。我试着混合使用jquery和queryselect，但是我尝试的所有方法都是在第一个父li的沿着抓住子li。所以很明显，我对事情的理解并不像我想象的那样好。
下面是占位符UI的外观图像。
此外，我不得不使用的东西，因为他们是我不能使用任何其他软件或语言为这个特定的项目。我试图建立了对象的条目被添加，但即使我得到了它的工作，这是很难遵循，我知道一个事实，在一个月左右，当我必须更新的东西，我将无法理解我在做什么。所以问题是我是不是在构建列表元素时出错了？还是我在从完成的UI中获取信息时出错了？我应该使用li和ul之外的其他东西吗？
这是我能做的一个小例子。
<html>
<head>
<meta charset="UTF-8" http-equiv="x-ua-compatible" content="ie=edge">
<title>JSON Builder</title>
</head>
<body>
<button style="width: 100%" onclick="getChildren()">Get</button>
<div style="height: 100%; width: 100%;" >
<ul id="options" style="height: 100%; border: 2px ridge; border-radius: 10px;">
<li id="entry_X" type="string" >
<div style="width: 15em;" >
<span id="entry_name_X" >Root 0</span>
</div>
<li>
<ul>
<li id="entry_1" type="string" >
<div style="width: 15em;" >
<span id="entry_name_1" >1</span>
</div>
<!-- This should be nested inside the li by my understanding but isnt so i was hiding them to get the look i wanted. -->
<li style='display: none;'>
<ul>
</ul>
</li>
</li>
<li id="entry_2" type="string" >
<div style="width: 15em;" >
<span id="entry_name_2" >2</span>
</div>
<li style='display: none;'>
<ul>
</ul>
</li>
</li>
</ul>
</li>
</li>
<li id="entry_6" type="string" >
<div style="width: 15em;" >
<span id="entry_name_X" >Root 1</span>
</div>
<li>
<ul>
<li id="entry_7" type="string" >
<div style="width: 15em;" >
<span id="entry_name_7" >7</span>
</div>
<li style='display: none;'>
<ul>
</ul>
</li>
</li>
<li id="entry_8" type="string" >
<div style="width: 15em;" >
<span id="entry_name_8" >8</span>
</div>
<li style='display: none;'>
<ul>
</ul>
</li>
</li>
</ul>
</li>
</li>
</ul>
</div>
</body>
<script>
function getChildren() {
// This returns a length of 6 items
var l1 = document.querySelectorAll( 'ul>li' );
alert( "[ QALL ul>li length ] " + l1.length );
/*
This returns a length of 2 items.
the first item is the div in the first li and the 2nd is
the li inside the first li.
I expected this to return just the 1 li as there is only 1 li in
the options ul but that is not how its working.
*/
var l1 = document.querySelector( '#options' ).children;
alert( "[ QSEL options.children length ] " + l1.length );
//alert( l1[0].innerHTML );
//alert( l1[1].innerHTML );
var l1 = document.querySelectorAll( '#options ul>li' );
alert( "[ QSEL2 options.children length ] " + l1.length );
}
</script>
<script>
resizeTo( 690,390 );
moveTo(screen.width/2-210,screen.height/2-250);
</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</html>
1条答案
按热度按时间e4eetjau1#
修正是由上面的评论发布的。这里是一个修正版本的例子。简单的解决方案，但由于某种原因，我只是看不到它。