Изменение порядка Div - PullRequest
Новая
       25

Изменение порядка Div

21 голосов
/ 17 февраля 2009

Как мне изменить порядок элементов div без изменения исходного кода HTML?

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

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

Спасибо!

Ответы [ 6 ]

20 голосов
/ 17 февраля 2009

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

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

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

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

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

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

12 голосов
/ 17 февраля 2009

Я бы использовал 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, так как я уверен, что это будет работать только с узлами, которые имеют одного и того же родителя.

10 голосов
/ 17 февраля 2009

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

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

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

6 голосов
/ 13 сентября 2016

Так как теперь 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

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

3 голосов
/ 17 февраля 2009

Вы можете сделать, в 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);
}

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

0 голосов
/ 17 февраля 2009

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...