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 の 1 行に対応します。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して各子ノードを取得し、ulJavaScript の を使用して、見つかったノードが であることを確認できますnodeName。安全性を高めるために、nodeNameがULではなくultoLowerCase()のように見えることを保証していました 

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 に答える