Question

如何在不改变HTML源代码的情况下重新排序div？

例如，我希望div以＃div2，＃div1，＃div3的顺序出现，但在HTML中它们是：

<div id="#div1"></div>  
<div id="#div2"></div>  
<div id="#div3"></div>

谢谢！

Answer 1

没有用css重新排序元素的方法。

您可以通过将它们全部浮动到右侧来水平反转它们的顺序。或者你可以绝对地相对于身体或其他一些包含元素来定位它们 - 但是这对于元素的大小以及相对于页面上其他元素的定位有严格的限制。

简短回答：您只能在非常有限的情况下实现这一目标。重新排序元素最好在标记中完成。

如果您无法控制html，可以使用javascript。这里使用jQuery：

$("#div2").insertAfter("#div3");
$("#div1").prependTo("#div2");

除非你的双手被捆绑，否则我当然不建议这样做。它将更难维护，对于您的最终用户，它将使您的页面在设置页面时“晃动”。

Answer 2

我会使用Javascript相应地遍历节点。如果你想使用像jQuery这样的库，你可以使用上面的建议。如果您不想臃肿，请使用以下简单和简约的解决方案......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
      function swapSibling(node1, node2) {
        node1.parentNode.replaceChild(node1, node2);
        node1.parentNode.insertBefore(node2, node1); 
      }

      window.onload = function() {
        swapSibling(document.getElementById('div1'), document.getElementById('div2'));
      }
    </script>
  </head>
  <body>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
  </body>
</html>

最好的问候......

编辑：将函数名称从swapNode更改为swapSibling，因为我相当确定这只适用于具有相同父级的节点。

Answer 3

在jQuery中，您可以执行以下操作：

$("#div1").insertAfter("#div2");

这会将id为'div1'的元素移到id为'div2'的元素之后。这假设您从id属性中删除了“＃”。

Answer 4

由于现在广泛支持flexbox，您还可以使用它仅使用css重新排序div：

<composite:interface>
    <composite:attribute name="CC_tableName" type="java.lang.String" />
</composite:interface>

<p:commandButton value="clear"
                 onclick="PF(#{cc.attrs.CC_tableName}).clearFilters()" />

<composite:implementation> 
    <p:dataTable 
        widgetVar="#{cc.attrs.CC_tableName}" 
        >                               
    </p:dataTable>
</composite:implementation>

和css：

<div id="container">
    <div id="div1">1</div>  
    <div id="div2">2</div>  
    <div id="div3">3</div>
</div>

会显示：

#container{
  display: flex;
  flex-direction: column;
}

#div2{
  order:2
}

#div3{
  order:1
}

您可以在此fiddle上尝试。

Answer 5

你可以用Javascript：

function reOrder() {
  divOne = document.getElementById('#div1');
  divTwo = document.getElementById('#div2');
  divThree = document.getElementById('#div3');
  container = divOne.parentNode;
  container.appendChild(divTwo);
  container.appendChild(divOne);
  container.appendChild(divThree);
}

编辑：修正了ID中的拼写错误。

Answer 6

由于你标记了jQuery，你可以使用javascript来remove元素，然后使用re-insert them，尽管这可能不太灵活。

如果有更多的背景，我认为你会得到更好的答案。

Div的重新排序

6 个答案: