如何获取UL中所有子节点UL标签的ID

Question

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.

<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.

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.

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.

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.

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. 
                }
            }
        }
    }
},

Answer 1

You can use children to get each child node, and then you can check to ensure the found node is a ul by using JavaScript's nodeName . To be extra safe I used toLowerCase() to guarantee that the nodeName looks like ul and not 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:

<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>