CODEWITHSUNDEEP
phphtml
Tomate
Tomate

Reputation: 308

Best way to reverse the order of list items

I have an exported Skype history that's been converted to HTML.

I have 20,000 list items < li > with varying amounts of html between each.

Only thing is it's in reverse order, what's the best way to swap it round - ie make the first < li > and all it's content the last one and the last one the first one?

A php solution? or is there a simpler way with specific software. The CSS solution isn't ideal.

If this would be the input as html

<li>stuff in here</li>
<li><div>MORE stuff in here</div></li>
<li><span class = "test">yet even more stuff in here</span></li>

this would be the output in html - saved as a file

<li><span class = "test">yet even more stuff in here</span></li>
<li><div>MORE stuff in here</div></li>
<li>stuff in here</li>

only there' 20,000 of them

Upvotes: 0

Views: 269

Answers (2)

Mehedi Hasan Siam
Mehedi Hasan Siam

Reputation: 1272

You can go to HTML to get your desired target

You must have an order list type. If it is <ul> you can go for this

ul {
    transform: rotate(180deg);
}
ul > li {
    transform: rotate(-180deg);
}
<ul>
  <li>stuff in here</li>
  <li><div>MORE stuff in here</div></li>
  <li><span class = "test">yet even more stuff in here</span></li>
</ul>

if you have <ol> you can go for this

ol {
  display: flex;
  flex-direction: column-reverse;
  list-style: none
}
<ol>
  <li>stuff in here</li>
  <li><div>MORE stuff in here</div></li>
  <li><span class = "test">yet even more stuff in here</span></li>
</ol>

Upvotes: 2

Markus Zeller
Markus Zeller

Reputation: 9090

  • Split the Lists into an array
  • Reverse the order
  • Output the reversed list
$input = <<<_HTML
<li>stuff in here</li>
<li><div>MORE stuff in here</div></li>
<li><span class ="test">yet even more stuff in here</span></li>
_HTML;

$list = [];
preg_match_all('~<li>(.*?)</li>~', $input, $list);
$list = array_reverse($list[0]);

foreach($list as $item)
    echo $item, PHP_EOL;

Results in

<li><span class ="test">yet even more stuff in here</span></li>
<li><div>MORE stuff in here</div></li>
<li>stuff in here</li>

Upvotes: 3

Related Questions