Live Example

Question

我知道这是一个非常基本的问题，我似乎只是遇到了一些问题。我有一个像下面这样的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>

我选择了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");
        }
}

所以逻辑应该是，所选择的UL有子UL获取那些UL的ID并将它们打印到控制台。

上述代码不起作用。我相信那是因为它抓住了没有id的东西。但是如果我把它改为k＆lt; tag.length它工作，但仍然只有17，我想它也得到18。

请帮忙。提前致谢。

更新，全功能。 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. 
                }
            }
        }
    }
},

Answer 1

您可以使用children获取每个子节点，然后您可以使用JavaScript ul检查以确保找到的节点是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

另外，我稍微修改了你的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>

如何获取UL中所有子节点UL标记的id

1 个答案:

Live Example