0

私はphpファイルで関数を使用して、次のような「li」要素と「span」要素をいくつか作成しています。

while($row_quotes=mysql_fetch_array($result_quotes) and $x<10){
$x++;
echo "<li class='citazione'>".$row_quotes['citazione']."</li><span class='citazione_info'>".$row_quotes['personaggio']." - ".$row_quotes['libro']."</span>";
}

これらは「ul id='quotes_holder'」内に含まれています。次に、特定の呼び出しで作成されたすべての「li」要素と「span」要素を削除する必要があるJavaScript関数があるため、「ul」を含むremoveChild（）メソッドを使用してそれらを削除するとうまくいくと思いました。

JavaScript関数は次のとおりです。

function ritorna_filtri(obj, autore){
var index=obj.selectedIndex;
var selected=obj.childNodes[index];
var value= selected.value;
var div=document.getElementById('quotes_holder');
for(l=0;l<div.childNodes.length;l++){
    div.removeChild(div.childNodes[l]);
}

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        response=xmlhttp.responseText;
        jsonObj=eval("("+response+")");
        for(i=0;i<jsonObj.libri.length;i++){
            var li=document.createElement('li');
            var text=document.createTextNode(jsonObj.libri[i].titolo);
            li.appendChild(text);
            li.setAttribute('class', 'filtro');
            div.appendChild(li);
        }
    }
}
xmlhttp.open("GET","ritorna_filtri.php?filtro="+value+"&autore="+autore,true);
xmlhttp.send();
}

問題は、関数が実行されたときに「li」要素のみが削除され、「span」がまだ残っていることです。

4

2 に答える 2

2

注: a の有効な子要素ulは 0 個以上のli要素のみです: https://developer.mozilla.org/en/HTML/Element/ul

このjsFiddleをチェックしてください：http://jsfiddle.net/MrpeF/

その中で、私は2つulの sを作成liしspanました。li実行中のコンソールを観察すると、要素だけが含まれていることがわかりますchildNodes(そして、奇妙なことに、私のコード間隔からの TextNodes!?)。違いは、有効な HTML には が含まspanれているliため、 を削除するliと目的が達成されることです。

言及する価値のあるもう1つのことは、for...ループが非効率的であることです。すべての反復の長さを計算するchildNodesと、ループのコストが必要以上に高くなります。実際にループに入る前にループの長さをカウントする方が効率的です。

var looplen = div.childNodes.length;
for(l=0;l<looplen;l++){
    div.removeChild(div.childNodes[l]);
}

ドキュメンテーション

于 2012-06-26T21:27:33.273 に答える
0

0toからループしているため、元のコードは機能しませんがchildNodes.length - 1、項目 #0 を削除してカウンターをインクリメントすると、次の反復で項目 #1 が削除されることを忘れています。#0 にはまだ項目があります。

次のコードを使用して、要素のコンテンツを削除できます。

var div = document.getElementById('quotes_holder');
while (div.firstChild) {
    div.removeChild(div.firstChild);
}​

デモ

PS: あなたの HTML マークアップは無効です。

于 2012-06-26T21:40:43.817 に答える