javascript 如何获取一个UL中所有子节点UL标签的id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16224749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the id of all the child node UL tags in a UL
提问by recneps
I know this is a pretty basic question I just seem to be having some issues doing it. I have a HTML structure like below.
我知道这是一个非常基本的问题，我似乎在做这件事时遇到了一些问题。我有一个像下面这样的 HTML 结构。
<ul>
<li>
<ul class=t2 id=15>
<li class='item'>a<span class='val'>b</span></li>
<li class='item'>c<span class='val'>d</span></li>
<li class='item'>e<span class='val'>f</span></li>
<li class='item'>parameters : </li>
<li>
<ul class=t3 id=16>
<li>
<ul class=t4 id=17></ul>
</li>
<li>
<ul class=t4 id=18></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I have the UL with the id of 16 selected and I want to select all its child ul nodes and grab there id. I am able to select the ul with an id of 17 but I cannot grab it's sister node. Here is the JavaScript I am using to get the child nodes.
我选择了 id 为 16 的 UL，我想选择它的所有子 ul 节点并获取那里的 id。我可以选择 id 为 17 的 ul，但我无法获取它的姊妹节点。这是我用来获取子节点的 JavaScript。
if (document.getElementById(this.toDelete[i]).getElementsByTagName('ul').length >= 1) {
var tag = document.getElementById(this.toDelete[i]).getElementsByTagName('ul');
for (var k = 0; k <= tag.length; k++) {
console.log("tag name: " + tag[k].id + " these will be pushed to Delete");
}
}
So the logic should be, the the selected UL has child ULs get the ID of those ULs and print them to the console.
所以逻辑应该是，选定的 UL 有子 UL 获取这些 UL 的 ID 并将它们打印到控制台。
The above code does not work. I believe that is because it is grabbing the which does not have a id. But it also if I change it to k < tag.length it works, but still only gets 17 and I want to it get 18 as well.
上面的代码不起作用。我相信这是因为它正在抓取没有 id 的 。但是如果我将它更改为 k < tag.length 它也可以工作，但仍然只得到 17，我也希望它得到 18。
Please help. Thanks in advance.
请帮忙。提前致谢。
UPDATED, full function. the items array is an array of objects with html and id properties, toDelete is an array with just numbers (ids of items to be deleted. The html in items.html corresponds to one line of html. IE 'ab'. The function is a bit of a mess since I am just trying to get it to work properly. I know I can make it cleaner, that is why I did not post the whole function.
已更新，功能齐全。items 数组是一个具有 html 和 id 属性的对象数组，toDelete 是一个只有数字的数组（要删除的项目的 id。items.html 中的 html 对应于一行 html。IE 'ab'。函数是有点乱，因为我只是想让它正常工作。我知道我可以让它更干净，这就是为什么我没有发布整个功能。
deleteItems: function () {
for (var i = 0; i < this.toDelete.length; i++) {
console.log("Item to be deleted: " + this.toDelete[i]);
for (var j = 0; j < this.items.length; j++) {
if (this.items[j].id == this.toDelete[i]) {
this.items[j] = ""; //this should be a slice
if (document.getElementById(this.toDelete[i]).getElementsByTagName('ul').length >= 1) {
var tag = document.getElementById(this.toDelete[i]).getElementsByTagName('ul');
for (var k = 0; k <= tag.length; k++) {
console.log("tag name: " + tag[k].id + " these will be pushed to Delete");
}
this.toDelete.push(document.getElementById(this.toDelete[i]).getElementsByTagName('ul')[0].id);
//check to see if it has those there sister nodes.
}
}
}
}
},
回答by What have you tried
You can use childrento get each child node, and then you can check to ensure the found node is a ulby using JavaScript's nodeName. To be extra safe I used toLowerCase()to guarantee that the nodeName looks like uland not UL
您可以使用children获取每个子节点，然后您可以ul使用 JavaScript 的nodeName. 为了更加安全，我曾经toLowerCase()保证 nodeName 看起来像ul而不是UL
deletedItems();
function deletedItems() {
var ulChildren = document.getElementById('ul16').children;
var childrenLength = ulChildren.length;
alert(childrenLength);
for(var i = 0; i < childrenLength; i++){
if(ulChildren[i].children[0].nodeName.toLowerCase() === 'ul'){
alert("found one, the id is: " + ulChildren[i].children[0].id);
}
}
}
Live Example
现场示例
Also, I modified your HTML a bit:
另外，我稍微修改了您的 HTML：
<ul>
<li>
<ul class=t2 id=15>
<li class='item'>a<span class='val'>b</span></li>
<li class='item'>c<span class='val'>d</span></li>
<li class='item'>e<span class='val'>f</span></li>
<li class='item'>parameters : </li>
<li>
<ul class="t3" id="ul16">
<li>
<ul class=t4 id="ul17"></ul>
</li>
<li>
<ul class="t4" id="ul18"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
