Question

我有一个表单，我使用以下系统：字段及其标签为float: left，并且解释如何填写字段的扩展注释显示在右侧，位于左边缘较宽的位置。<登记/> 根据Eric Meyer的书中提出的建议，我使用hr来对齐这两个：我将hr设置为：

.lineup { clear:both; visibility: hidden}

然后我使用Javascript在我想要的时候显示评论这很有效，除了（对于Safari中的一些奇怪的问题），当评论很长时，它会“按下”其他表单内容。所以，我说，我可以写一个Javascript函数在页面构建上运行，删除hr（记住它们的offsetTop）并将所有描述移到hr所在的地方附近。
但我不能让它删除hr。

最后代码：

var hrListY = new Array();              // Y-coordinates of HR "lineup" elements

// Moves all descriptions so their middle is where the top used to be, and
// removes the <hr>s previously used to position them.

function relayoutDescriptions() {
        var hrs = document.getElementsByTagName("hr");
        alert('hrs.length = ' + hrs.length);
        var i;
        for (i = 0; i < hrs.length; i++) {
                var hr = hrs[i];
                if (hr.className == 'lineup') {
                        hrListY.push(hr.offsetTop);
                        alert('Got an HR element: Y = ' + hr.offsetTop + ' parentNode class = "' + hr.parentNode.className + '"');
                        hr.parentNode.removeChild(hr);
                        }
                }

// Now we have a list of Y-coordinates of HR elements, hrListY.  We use it
// to adjust the offsetTop's of the -desc divs.  For each one, we adjust the
// offsetTop so the center of the div is at the height where the HR was.

        }

到目前为止，这就是我所拥有的一切。它为offsetTop和一个合理的父节点类提供了合理的递增数字，但结果布局清楚地显示了，并且firebug确认，hr仍在那里。

帮助？

P.S。
如果有一个简单的方法可以使用JQuery，我可以接受，但我真的想知道$ @＆amp; *％在这里发生了什么。

谢谢！

Answer 1

getElementsByTagName返回的节点列表是实时的，这意味着当您从DOM中删除其中一个元素时，右侧的内容向左移动，因此您只删除每一个项目。

来自http://www.w3.org/TR/DOM-Level-2-Core/core.html

DOM中的NodeList和NamedNodeMap对象是实时的;也就是说，对底层文档结构的更改将反映在所有相关的NodeList和NamedNodeMap对象中。

你可以通过移动循环中的alert('hrs.length = ' + hrs.length);来看到这一点。它每次都会提醒不同的号码。

要解决此问题，您可以复制列表

var myNodeList = document.getElementsByTagName('HR');
myNodeList = Array.prototype.slice.call(myNodeList);

或者你可以从右到左迭代

var myNodeList = document.getElementsByTagName('HR');
for (var i = myNodeList.length; --i >= 0;) {
  ...
}

这样当您删除某个项目时，右侧没有任何内容可以改变您的索引。

我尝试使用JavaScript删除元素有什么问题？

1 个答案: