Good morning, everyone! I have such situation: there is an old Perl code where I have a <ul> that looks like this (pseudocode):

<ul>
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
    my $resp =api_request... # basically the fetch process
    if ($error ne '') {
        <li>$error</li>
    }
    <li>option 5</li>
</ul>

As this code is old and it will be rewritten, i need a temporary fix^=L is it possible to somehow display the 4th <li> (that one with error) above all others? How to make it look like this:

• error
• option 1
• option 2
• option 3
• option 5

CodePudding user response：

The obvious solution is to carry out the API call before you start printing the list. Then, if you know you have an error, you can display that before displaying the rest of the list.

CodePudding user response：

If you know that there will always be a 4th li which you want to move to the top you can make the ul flex and reorder the items:

ul {
  display: flex;
  flex-direction: column;
}

li:nth-child(1) {
  order: 2;
}

li:nth-child(2) {
  order: 3;
}

li:nth-child(3) {
  order: 4;
}

li:nth-child(4) {
  order: 1;
}

li:nth-child(5) {
  order: 5;
}

<ul>
  <li>option 1</li>
  <li>option 2</li>
  <li>option 3</li>
  <li>error</li>
  <li>option 5</li>
</ul>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

However, if you don't know that there will always be an error message you'll need to either change the PERL (to always put out an li there even if empty if no error) or post process with some Javascript to see if there is an error li or not. Maybe this can be done by testing whether there are 4 or 5 items in the ul? We don't know enough about the real case to be able to say definitely.