Reordering of Divs

后端未结

关注

 6  758

轮回少年

How would I go about reordering divs without altering the HTML source code?

example, I want divs to appear in order #div2, #div1, #div3, but in the HTML they are:

相关标签:

6条回答

予麋鹿

2020-12-03 01:55

I would use Javascript to traverse the nodes accordingly. If you want to use a library like jQuery, you can use the above suggestions. If you'd prefer not to have the bloat, use the following simple and minimalistic solution...

<!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>

Best regards...

EDIT: Changed function name from swapNode to swapSibling, as I am fairly certain this will only work with nodes that have the same parent.

0 讨论(0)

难免孤独

2020-12-03 01:56

You could do, in 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);
}

Edit: Fixed typo in IDs.

0 讨论(0)

青春惊慌失措

2020-12-03 01:59
In jQuery, you can do the following:
```
$("#div1").insertAfter("#div2");
```
That will move the element with id 'div1' to after element with id 'div2'. This assumes that you eliminate the '#' from your id attributes.
0 讨论(0)
发布评论:

提交评论
- 加载中...
面向向阳花

2020-12-03 02:11
Since now flexbox is widely supported you can also use it to reorder divs using only css:
```
<div id="container">
    <div id="div1">1</div>  
    <div id="div2">2</div>  
    <div id="div3">3</div>
</div>
```
And css:
```
#container{
  display: flex;
  flex-direction: column;
}

#div2{
  order:2
}

#div3{
  order:1
}
```
It would display:
```
1
3
2
```
You can try it on this fiddle.
0 讨论(0)
发布评论:

提交评论
- 加载中...
花落未央

2020-12-03 02:14

Since you tagged jQuery, you could use javascript to remove the elements and then re-insert them although that may not be all too flexible.

Having a bit more context would net you better answers I think.

0 讨论(0)
发布评论:

提交评论
- 加载中...
南旧

2020-12-03 02:16
There is no catch-all way of reordering elements with css.

You can inverse their order horizontally by floating them all to the right. Or you can position them absolutely relative to the body or some other containing element - but that comes with severe limitations regarding the size of the elements, and positioning relative to other elements on the page.

Short answer: You can only achieve this in a very limited set of circumstances. Reordering elements is best done in markup.

If you have no control over the html, you could use javascript. Here using jQuery:
```
$("#div2").insertAfter("#div3");
$("#div1").prependTo("#div2");
```
I certainly don't recommend that unless your hands are tied. It will be harder to maintain, and for your end users it will make your page "jerk around" while its setting up the page.
0 讨论(0)
发布评论:

提交评论
- 加载中...