Переопределение разделов

Как я могу переупорядочить divs без изменения исходного кода HTML?

Например, я хочу, чтобы divs отображались в порядке # div2, # div1, # div3, но в HTML они:

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

Спасибо!

Ответ 1

Нет никакого уловки для переупорядочения элементов с помощью css.

Вы можете инвертировать их порядок по горизонтали, плавая их все вправо. Или вы можете позиционировать их абсолютно относительно тела или какого-либо другого содержащего элемента, но это связано с серьезными ограничениями относительно размера элементов и позиционированием относительно других элементов на странице.

Короткий ответ: вы можете добиться этого только в очень ограниченном наборе обстоятельств. Элементы переупорядочения лучше всего выполнять в разметке.

Если у вас нет контроля над html, вы можете использовать javascript. Здесь с помощью jQuery:

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

Я, конечно, не рекомендую это, если ваши руки не связаны. Это будет сложнее в обслуживании, и для ваших конечных пользователей он сделает вашу страницу "рывком" при настройке страницы.

Ответ 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>

С наилучшими пожеланиями...

EDIT: Изменено имя функции из swapNode для swapSibling, так как я уверен, что это будет работать только с узлами с одним и тем же родителем.

Ответ 3

В jQuery вы можете сделать следующее:

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

Это приведет к перемещению элемента с id 'div1' до элемента с id 'div2'. Это предполагает, что вы удаляете "#" из ваших идентификационных атрибутов.

Ответ 4

Так как теперь flexbox широко поддерживается, вы также можете использовать его для переупорядочения div, используя только css:

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

И CSS:

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

#div2{
  order:2
}

#div3{
  order:1
}

Это будет отображать:

1
3
2

Вы можете попробовать это на этой скрипке.

Ответ 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);
}

Изменить: Исправлена опечатка в идентификаторах.

Ответ 6

Поскольку вы отметили jQuery, вы можете использовать javascript для remove элементов, а затем повторно вставьте их, хотя это может быть не слишком гибким.

Имея немного больше контекста, вы получите более эффективные ответы.