显示：无/块排序

时间：2017-02-13 06:32:33

标签： javascript html dom dhtml appendchild

我正在学习JavaScript并试图从原始结构重新排序元素。例如，如果我有以下元素：

<p id="first">Hello</p>
<p id="second">Bye</p>

输出为：

你好

再见

但我正在尝试输出：

再见

您好

我正在做的是给每个元素一个数字id（第一个元素的id为1，第二个元素为2，第十个为10，依此类推）。然后我使用document.getElementById()和for循环将每个元素放在一个数组中，并使用array[i].style.display = none按顺序隐藏元素。然后我通过使用另一个for循环并按照向后的顺序使数组可见 array(array.length-i).display = block。但是这又以正常文档顺序返回（即 Hello 然后 Bye 而不是 Bye 然后 Hello ）。 为什么？我该怎么办？

以下是代码：

<p id="1">a</p>  <!--UPLOADED FIRST -->
<p id="2">b</p>
<p id="3">c</p>  <!--UPLOADED LAST -->

<script type="text/javascript">    
var zana = [];

for(var i = 1;i<10;i++){ //inclusive not inclusive
    if(document.getElementById(i)==null) break;
    zana[i]=document.getElementById(i);
    console.log(zana[i]);
}    

/*now we have an array, Zana, of elements in which the 
last index elements are the ones we want first */

for(var i = 1;i<10;i++){
     if(zana[i]==null) break;
    zana[i].style.display = "none"; 

}
  //  alert(zana[1].innerHTML);
for(var i = 1; i<zana.length;i++){
 console.log(zana[zana.length-i]);
 zana[zana.length-i].style.display = "block";
}
</script>

编辑：

我想通过使用document.createElement（）来解决这个问题。以下是代码，以防任何人希望它/正在阅读这个以供将来参考。如果有更有效的方法可以告诉我：

<p id="1">a</p>  <!--UPLOADED FIRST -->
<p id="2">b</p>
<p id="3">c</p>  <!--UPLOADED LAST -->

<script type="text/javascript">    
var zana = [];

for(var i = 1;i<10;i++){ //inclusive not inclusive
    if(document.getElementById(i)==null) break;
    zana[i]=document.getElementById(i);
    console.log(zana[i]);
}    

/*now we have an array, Zana, of elements in which the 
last index elements are the ones we want first */

for(var i = 1;i<10;i++){
     if(zana[i]==null) break;
    zana[i].style.display = "none"; 

}

  //  alert(zana[1].innerHTML);
for(var i = 1; i<zana.length;i++){
 var temp = document.createElement("p");
 var temptext = document.createTextNode((zana[zana.length-i]).innerHTML); 
 temp.appendChild(temptext);    
 document.body.appendChild(temp);
}
</script>

1 个答案:

答案 0 :(得分：0)

  

...这又以正常文档顺序返回（ Hello 然后 Bye 而不是 Bye 然后 Hello ）。 为什么？

正如评论中所提到的，代码只是以相反的顺序设置显示属性 - 它实际上并没有反转节点的顺序。

  

我该怎么做？

可以实现的一种方法是使用.remove()实际删除节点，然后以相反的顺序将Node.appendChild()附加到节点上。请参阅下面的示例，其中逆序是通过设置初始值来实现的，如果 for 中的迭代器循环到数组的长度然后递减而不是递增值：

for (var i = zana.length; i > 0; i--) {

同样为此，我们应检查以确保给定索引处的元素不是null（或undefined），但如果是，则跳到下一次迭代（{{3而不是打破循环：

if (zana[i] == null) continue;

在下面的示例中，反转段落标记的功能已移至事件处理程序中。单击标有反向顺序的按钮，查看反转的元素顺序。在DOM准备好之前，也不会添加事件处理程序，利用continue对象上的EventTarget.addEventListener()并等待事件document。这可以避免在DOM准备好之前访问DOM元素时出错。

段落标签也被移动到一个包含 div （即<div id="container"）中以隔离元素以使其顺序颠倒但你可以将它们留作身体标签的子节点并利用将它们追加到DOM中时document.body。

var zana = [];
//wait until the DOM is ready before interacting with DOM
document.addEventListener('DOMContentLoaded', function() {
  var container = document.getElementById('container');
  //only reverse when button is clicked
  document.getElementById('reverse').addEventListener('click', function(clickEvent) {
    for (var i = 1; i < 10; i++) { //inclusive not inclusive
      if (document.getElementById(i) == null) break;
      zana[i] = document.getElementById(i);
    }

    /*now we have an array, Zana, of elements in which the 
    last index elements are the ones we want first */

    for (var i = 1; i < 10; i++) {
      if (zana[i] == null) break;
      zana[i].remove();
    }
    for (var i = zana.length; i > 0; i--) {
      if (zana[i] == null) continue;
      container.appendChild(zana[i]);
    }
  });
});
<div id="container">
  <p id="1">a</p>
  <!--UPLOADED FIRST -->
  <p id="2">b</p>
  <p id="3">c</p>
  <!--UPLOADED LAST -->
</div>
<button id="reverse">Reverse order</button>

另一个选择是在迭代项目之前用DOMContentLoaded反转数组：

zana.reverse();
for (var i = 0; i < zana.length ; i++) {
    //iterate over the items now in reverse order


var zana = [];
//wait until the DOM is ready before interacting with DOM
document.addEventListener('DOMContentLoaded', function() {
  var container = document.getElementById('container');
  //only reverse when button is clicked
  document.getElementById('reverse').addEventListener('click', function(clickEvent) {
    for (var i = 1; i < 10; i++) { //inclusive not inclusive
      if (document.getElementById(i) == null) break;
      zana[i] = document.getElementById(i);
    }

    /*now we have an array, Zana, of elements in which the 
    last index elements are the ones we want first */

    for (var i = 1; i < 10; i++) {
      if (zana[i] == null) break;
      zana[i].remove();
    }
    zana.reverse();
    for (var i = 0; i < zana.length; i++) {
      if (zana[i] == null) continue;
      container.appendChild(zana[i]);
    }
  });
});
<div id="container">
  <p id="1">a</p>
  <!--UPLOADED FIRST -->
  <p id="2">b</p>
  <p id="3">c</p>
  <!--UPLOADED LAST -->
</div>
<button id="reverse">Reverse order</button>

或者更简单的方法（假设我们只需要处理兄弟元素而不是子元素），迭代容器的childNodes并调用Array.reverse()，将第一个子节点作为第二个参数传递（之前插入当前元素的节点）。您还会注意到以下代码是Node.insertBefore()的功能方法。这样我们就不必手动将元素存储在数组中，创建一个计数器/迭代器变量来迭代，然后使用该变量索引到数组中。此外，这将迭代元素一次而不是三次。

//wait until the DOM is ready before interacting with DOM
document.addEventListener('DOMContentLoaded', function() {
  var container = document.getElementById('container');
  //only reverse when button is clicked
  document.getElementById('reverse').addEventListener('click', function(clickEvent) {
    container.childNodes.forEach(function(childNode) {
      if (childNode.previousSibling) {
        container.insertBefore(childNode, container.firstChild);
      }
    });
  });
});
<div id="container">
  <p id="1">a</p>
  <!--UPLOADED FIRST -->
  <p id="2">b</p>
  <p id="3">c</p>
  <!--UPLOADED LAST -->
</div>
<button id="reverse">Reverse order</button>

相关问题
最新问题