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

我制作了一个 jsfiddle 来演示一种更简单的方法。您会注意到 act div 是红色的，而 start div 是蓝色的。当您单击按钮时，innerHTML 将发生变化。此外，您可能会看到 undefined 的一个原因是 DOM 没有加载，因此它不知道 div 存在。下次您应该使用window.onload = inner();使函数在 DOM 加载后运行。

这是 jsfiddle：http: //jsfiddle.net/yY9Ag/16/

于 2012-07-20T06:00:36.957 回答
1

此行为的原因是 id 为“start”的 div 与以下 div 之间的空白。因此， nextSibling 将是文本内容。您需要执行 nextSibling 两次：

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

另一种选择是删除两个 div 之间的空白字符。

于 2012-07-20T05:45:26.847 回答
1

有两种方法

首先修复代码

nextSibling.nextSibling.innerHTML

或修复 html ：删除所有 \n char

<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。

函数内部（）{

    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 回答