2

我知道这是一个非常基本的问题，我似乎在做这件事时遇到了一些问题。我有一个如下所示的 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 < 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. 
                }
            }
        }
    }
},
4

1 回答 1

8

您可以使用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);
        }
    }
}

现场示例

另外，我稍微修改了您的 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>
于 2013-04-25T21:41:32.247 回答