Tips for organizing and re-indexing numbered list items in an unordered HTML list

I'm working on sorting and reindexing a sample list that is currently unordered but numbered.

<ul>
   <li>0001 - Apple</li>
   <li>0002 - Banana</li>
   <li>0003 - Mango</li>
</ul>

My goal is to rearrange the list so that "0001 - Apple" moves down in the order, like this:

<ul>
   <li>0002 - Banana</li>
   <li>0003 - Mango</li>
   <li>0001 - Apple</li>
</ul>

However, the desired final order should be as follows:

<ul>
   <li>0001 - Banana</li>
   <li>0002 - Mango</li>
   <li>0003 - Apple</li>
</ul>

During this process, I encounter issues when moving items up or down one row within the list.

<ul>
   <li>0002 - Mango</li>
   <li>0001 - Banana</li>
   <li>0003 - Apple</li>
</ul>

For example, if I move an item up one row:

<ul>
   <li>0002 - Mango</li>
   <li>0003 - Apple</li>
   <li>0001 - Banana</li>       
</ul>

The indexes for each item need to remain consistent as "0001," "0002," and "0003," respectively.

This movement action should be initiated by buttons for upward or downward movements.

Answer №1

To change the position of only 001 to the bottom while keeping the order of the rest unchanged, you can try the code below:

const $ul = $('ul');

$ul.append($ul.children().filter(':contains(001)'));// or if moving from top to bottom, use `first()`

$ul.children().text((i, txt) => {
  let parts = txt.split('-');
  parts[0] = (i + 1).toString().padStart(3, '0');
  return parts.join(' -');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>0001 - Apple</li>
  <li>0002 - Banana</li>
  <li>0003 - Mango</li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I display a list of relative urls in an android TextView?

I have a situation in my application where I am displaying a block of HTML content in a TextView, which has been extracted and parsed from a webpage. This HTML includes numerous links, with some being absolute and others relative. My goal is to allow the u ...

Firefox Misplacement: Erroneously Shifting Element Locations

I have recently completed designing and developing a new website, which you can visit here. However, I am currently facing an issue with the positioning of the "About Us" image when accessing the site on either a tablet or a mobile device. Strangely enou ...

Invoke a function within an HTML element inserted using the html() method

Looking for help with a JavaScript function: function toggle_concessions(concessions) { var text = "<table>"+ "<tr><td class='concession-name'>gfhgfbfghfd</td><td class='op-encours&a ...

Transferring a moving CSS element from one div to another

Can you please advise on the most effective method for moving an element between divs in responsive design? This is the current structure of my page: <div class="container"> <div class="desktop"><h2>Hello, I am displaye ...

Navigate the contents within a DIV using scrolling

Is there a way to display items in a scrollable format, but only show them when the scroll reaches the bottom of a specific parent div (#left-cnt) instead of the window? <div id="left-cnt" class="col-md-8"> <div class="elements scroll">El ...

Create a stylish border around an ion-card using a sleek black bar

I have a card element with a title and subtitle, and I want to add a black bar above the header. <ion-list> <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events"> <ion-card-header> ...

Is it possible for audio to be activated and played while the phone is locked?

I am currently developing a web chat application and I have encountered an issue regarding playing notification sounds when a new message arrives. Initially, I decided to utilize howler.js for playing the sounds. While howler allows us to start playing a ...

Issues with Bootstrap's hamburger menu not functioning properly when clicked

Can't seem to get my hamburger button working. I've followed the bootstrap documentation and ensured that Bootstrap and jQuery are in the correct order, but still no luck. Any suggestions on what could be causing this issue? Are my links misplace ...

Execute JavaScript code prior to sending a Rails form

Before submitting the form, I would like to trigger the html5 geolocation javascript code. Here's how I envision the process: upon form submission, the user is prompted with a geolocation popup. After allowing access, the form data should be processed ...

Is it possible for Django's trans tags to incorporate HTML tags?

Is it possible for Django trans tags to incorporate HTML tags? For instance, can I use {% trans "Hold <em><strong>Ctrl</strong></em>" %}? Or would I need to use {% trans "Hold" %} <em><strong>{% trans "Ctrl" %}</str ...

What steps can be taken to restrict access to the next page for users who are not logged in?

In my main JavaScript file, I am trying to implement a condition where users must be logged in to access the welcome page. If a user is not logged in, they should be redirected to the login page by default. However, in my current code, the form is submitti ...

Execute PHP function prior to jQuery loading

Continuing from a previous question/answer found here: I'm grappling with how to implement this in my specific scenario (if it's feasible at all). In my case, I have a container div where clicking a button triggers the loading of a file into th ...

How to Implement Drupal.behaviors for Specific Pages?

Currently, I have a module that showcases an alert to users within a block. For those interested, you can find my code on GitHub here: https://github.com/kevinquillen/User-Alerts If you would like more information about the module and its functionality, ...

Detecting a specific button using a variable in jQuery

I've created a function that can identify which post has been clicked on. jQuery(document).ready(function() { jQuery(.recognize-post).on("click", function() { var clickedButton = jQuery(this).data("id") ...

Combining JQuery selectors with an object variable

I have multiple .children elements inside a .parent container. My goal is to iterate through each of the children elements. //This code is functioning properly. $('.parent .children').each(function(){ //Working fine. }); //However, I want ...

Add a font awesome icon to an external CSS file

Want to add a Font Awesome icon to an external CSS stylesheet? If you're using Font Awesome 5 & the free icons, you can follow this code snippet: #preview .buttons .ok { border: 1px solid #F5F5F5; border-radius: 4px; width: 28px; ...

Complete loading of iframe content on Internet Explorer versions 8 and 9

Having an issue with the full loading of a page in IE8-9. I need to perform certain actions after the content within a div is fully loaded, but it seems that in IE8-9, the page fails to load completely. This is causing problems as my actions are dependent ...

Ensure the TUMBLR og:image appears in larger dimensions for enhanced visibility [updated: additional code implemented]

I recently incorporated two widgets into my blog - one on the sidebar and another attached to each post. You can check them out at . To enhance the visual appeal, I uploaded a 900x900 og:image to the tumblr static servers, accessible through my FB Debug p ...

Get the desired text following the second <br> tag using jQuery

I am trying to identify a specific string that comes after the second occurrence of <br> tag and then check if this string contains any numbers. If there are no numbers present, I want an alert to be shown. The code for performing this action is func ...

What is the best way to send multiple id values with the same classname as an array to the database via AJAX in Codeigniter?

Hey everyone, I'm facing an issue where I need to send multiple IDs with the same class name but different ID values to the database using AJAX. However, when I try to do this, only the first value is being picked up and not all of them. How can I suc ...