1

別のdivのnextSiblingを使用して、div「act」の内容を変更したい。
しかし、結果は-未定義です。

function inner(){
var abc = document.getElementById("start").nextSibling;
document.getElementById("act").innerHTML = abc.innerHTML;
 }

<img id="btnRight" src="img/btnRight.png" onclick="inner()">
<div id="act"><img src="img/home01.jpg"></div>

<div id="store">
<div id="start">
<img src="img/img01.jpg">
</div>

<div>
<img src="img/img02.jpg"> //wanted to place into "act"
</div>

<div id="end">
<img src="img/img03.jpg">
</div>
</div>
4

6 に答える 6

5

を使用してnextElementSibling、nextSiblingテキストノードにすることができます

function inner(){
    var abc = document.getElementById("start").nextElementSibling;
    document.getElementById("act").innerHTML = abc.innerHTML;
}

フィドル

ターゲットブラウザがサポートしていないnextElementSibling場合は、兄弟をトラバースして最初の要素ノードを見つけることができます。

function nextElementSibling(element) {
    while (element.nextSibling){
        element = element.nextSibling;
        if (element.nodeType == Node.ELEMENT_NODE){
            return element;
        }
    }
    return undefined;                
}

フィドル

于 2012-07-20T05:45:32.323 に答える
3

ノードをトラバースするときは、必ず空白をスキップする必要があります。

function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType != 1);
    return elem;                
}

function inner(){
    var abc = next(document.getElementById("start"));
    document.getElementById("act").innerHTML = abc.innerHTML;
}

http://jsfiddle.net/CkCR3/で実際の例を見ることができます。

于 2012-07-20T05:45:48.383 に答える
1

この動作の原因は、IDが「start」のdivと次のdivの間の空白です。したがって、nextSiblingはテキストコンテンツになります。nextSiblingを2回実行する必要があります。

var abc = document.getElementById("start").nextSibling.nextSibling;

もう1つのオプションは、2つのdiv間の空白文字を削除することです。

于 2012-07-20T05:45:26.847 に答える
1

2つの方法があります

最初にコードを修正します

nextSibling.nextSibling.innerHTML

またはhtmlを修正します：すべての\ncharを削除します

<img id="btnRight" src="img/btnRight.png" onclick="inner()"><div id="act"><img src="img/home01.jpg"></div><div id="store"><div id="start"><img src="img/img01.jpg"></div><div><img src="img/img02.jpg"> //wanted to place into "act"</div><div id="end"><img src="img/img03.jpg"></div></div>​

divタグの次の兄弟は空のtextNodeであるため（表示されません）

于 2012-07-20T05:45:42.493 に答える
1

以下のようにコード行を変更してください。次のすべての要素が存在するかどうかがチェックされるため、内部htmlを取得します。

関数inner（）{

    var abc = document.getElementById("start");
    do {
        abc = abc.nextSibling;
    } while (abc && abc.nodeType != 1);
    document.getElementById("act").innerHTML = abc.innerHTML;     
   return false;
}
于 2012-07-20T05:59:50.273 に答える
1

より簡単な方法を示すためにjsfiddleを作成しました。act divが赤で、startdivが青であることがわかります。ボタンをクリックすると、innerHTMLが変化します。また、未定義が表示される理由は、DOMがロードされなかったため、divが存在することを認識していないためです。次回window.onload = inner();は、DOMがロードされた後に関数を実行するために使用する必要があります。

これはjsfiddleです：http：//jsfiddle.net/yY9Ag/16/

于 2012-07-20T06:00:36.957 に答える